图片无法显示主因是路径错误、文件名不匹配、格式不支持或运行环境问题。1. 检查相对/绝对路径是否正确，推荐使用相对路径；2. 确保文件名和扩展名大小写一致且无拼写错误；3. 使用浏览器支持的格式如.jpg、.png、.webp；4. 验证html语法规范，确保img标签正确书写并添加alt属性；5. 避免直接双击打开html，应通过本地服务器运行以排除跨域限制。按序排查可解决90%问题。
网页中插入的图片无法显示是常见问题，通常不是代码写错，而是路径、格式或浏览器限制导致。下面从几个关键点帮你排查和解决HTML图片不显示的问题。
检查图片路径是否正确
图片路径错误是最常见的原因。确保你使用的路径与图片实际位置一致。
• 使用相对路径时，要相对于当前HTML文件的位置。例如，图片在同级images文件夹中，应写：src="images/photo.jpg"
• 使用绝对路径（本地调试慎用）：
src="C:/project/images/photo.jpg"（仅本地有效）
• 推荐使用相对路径，便于项目迁移。
确认图片文件名和扩展名无误
HTML对大小写敏感（尤其在Linux服务器上），文件名必须完全匹配。
• 检查拼写错误，如“pictrure.jpg”写成“picture.jpg”• 确保扩展名正确，比如图片是PNG格式却写成.jpg
• 可在浏览器开发者工具（F12）查看Network标签，看图片请求是否404
验证图片格式是否被支持
主流浏览器支持JPG、PNG、GIF、WebP等格式，但老旧格式或HEIC等新格式可能不兼容。
立即学习“前端免费学习笔记（深入）”；
• 优先使用 .jpg、.png 或 .webp 格式• 避免使用 .bmp、.tiff 或手机原生HEIC格式
• 可用图像编辑软件另存为通用格式测试
检查HTML代码书写规范
语法错误也会导致图片不加载。
• 正确写法示例：
• 必须闭合标签（HTML5允许不闭合，但建议写完整）
• alt属性建议填写，有助于排错和无障碍访问
查看服务器或本地环境限制
有些情况是运行环境的问题。
• 直接双击HTML文件打开（file://）可能因跨域限制无法加载资源• 建议使用本地服务器（如VS Code Live Server、Python http.server）运行
• 检查是否有浏览器插件（如广告拦截）屏蔽了图片
基本上就这些。按顺序检查路径、文件、格式和运行方式，90%的图片不显示问题都能解决。不复杂但容易忽略细节。
