图片不显示主因是img标签缺失src或alt属性；src必须为有效路径，相对路径以HTML文件位置为基准；404需查Network面板，403系服务器权限问题；90%场景无需picture，优先CSS响应式+srcset。
图片不显示？先检查 <img> 标签是否写对了
最常见的不是路径问题，而是标签本身漏了必填属性。浏览器渲染 <img> 时，src 是强制要求的，缺了就完全不渲染（连占位框都没有），也不会报错。
-
src必须是有效路径或 URL，不能为空、不能只写文件名不带扩展名（如logo而非logo.png） -
alt不是可选的“辅助功能建议”，它是语义必需项；缺失会导致部分屏幕阅读器跳过该元素，且 SEO 友好度下降 - 别用
<image>或<img src="..."></img>——<img>是自闭合标签，没有结束标签
相对路径怎么写才不翻车
路径错误占图片不显示问题的 70% 以上。关键不是“相对”还是“绝对”，而是“相对于谁”。<img> 的 src 路径，永远相对于当前 HTML 文件所在位置解析。
- HTML 在
/pages/index.html，想引用/assets/logo.png→ 写src="../assets/logo.png" - HTML 和图片在同一目录（如都在
/下）→ 直接写src="logo.png" - 用
./开头没坏处但没必要；../多了一级就 404，少一级就找错文件夹 - Windows 路径分隔符
\在 HTML 里无效，一律用/（哪怕你在本地双击打开）
图片加载失败后怎么快速定位
别急着改路径，先看浏览器开发者工具 Network 面板里这个请求的真实状态码和响应头。
- 看到
404 Not Found：路径错了，或文件根本没部署到服务器对应位置 - 看到
403 Forbidden：服务器配置禁止了该目录访问（常见于把图片放在/node_modules或/src下直接引用） - 预览里显示“破损图标”但 Network 显示 200：可能是图片格式损坏、MIME 类型不对（如服务器返回
text/plain却声称是 PNG），或跨域限制（CORS报错在 Console 里） - 右键图片 → “检查元素”，鼠标悬停在
src值上，Chrome 会显示解析后的完整 URL，点一下就能跳转验证
用 <picture> 或现代 srcset 前先确认需求
90% 的静态站点根本不需要响应式图片语法。盲目套用反而增加维护成本和加载不确定性。
立即学习“前端免费学习笔记（深入）”；
- 只是适配不同屏幕宽度？优先用 CSS 控制
<img>宽度 +max-width: 100%，再配合srcset提供 2x 图即可 -
<picture>真正适用场景只有两个：需要根据视口条件切换完全不同的图片（如桌面端横图 / 移动端竖图），或必须支持 WebP 但要给不支持的浏览器回退 -
srcset的w描述符（如logo-2x.png 2w）依赖sizes属性才能生效，漏写sizes就退化成普通src
最常被忽略的一点：图片路径在构建工具（如 Vite、Webpack）里会被重写，但开发服务器（live-server、双击打开）不会。同一段代码，在 vite dev 下能显示，放到 Nginx 根目录却 404，大概率是路径没按实际部署结构调整。
