图片路径失效时应通过开发者工具network标签页查看实际请求url，常见问题包括相对路径解析错误、大小写敏感、srcset和source未同步更新、type与sizes属性缺失、dom操作不当及onerror无法捕获所有错误类型。
图片路径失效时，先查开发者工具里的实际请求地址
浏览器根本不会按你“以为”的路径去加载图片。打开 F12 → 切到 Network 标签页 → 刷新页面 → 筛选 img 类型，直接看每个图片发起的请求 URL 是什么。常见问题包括：
-
src="images/team/jane.jpg"在/about/index.html中会被解析为/about/images/team/jane.jpg，而非项目根目录下的/images/team/jane.jpg - 服务器区分大小写，
TEAM/和team/是两个不同路径，404 却不报错，只显示空白或小图标 -
src="./images/logo.png"和src="images/logo.png"在嵌套路由下行为不一致，前者从当前文件所在目录出发，后者依赖 HTML 解析上下文，容易漏掉一层
批量替换图片时，必须同步更新 srcset 和 <source></source> 里的所有引用
只改 <img src> 是无效的。现代响应式页面普遍用 <picture></picture> 提供多尺寸/多格式图源，漏掉任意一项，对应设备或网络条件下就会回退到旧图。
- 检查是否存在类似结构：
<picture><source media="(min-width: 768px)" srcset="images/team/jane-lg.webp" type="image/webp"><source media="(min-width: 768px)" srcset="images/team/jane-lg.jpg" type="image/jpeg"><source media="(max-width: 767px)" srcset="images/team/jane-sm.webp" type="image/webp"> @@##@@ </source></source></source></picture>
- 需一并替换：
jane-lg.webp、jane-lg.jpg、jane-sm.webp、jane.jpg四个文件，且确保宽高比一致、内容语义相同 -
<source></source>必须显式声明type，否则 Safari 可能跳过该源；sizes属性缺失会导致浏览器无法正确选择分辨率
用 JS 批量管理图片时，别用 getElementsByClassName，改用 querySelectorAll + DocumentFragment
DOM 操作不是越快越好，而是越稳越省事。实时 NodeList 在循环中增删 class 或属性会引发遍历错位；反复 appendChild 触发重排，性能差还难调试。
- 选中目标用：
document.querySelectorAll('img[data-batch="team"]')，带语义标记，避免误伤 - 修改前先校验路径：
if (img.src.includes('.jpg') || img.src.includes('.webp')) { img.src = newSrc }，防止静默失败 - 生成多个
<picture></picture>时，先创建DocumentFragment，把所有节点 append 到它里面，最后一次性挂载到 DOM，避免多次 layout - 批量监听错误不要写
onerror=""内联属性——逻辑无法复用，且每次错误都重新解析字符串
onerror 降级经常不触发，真正有效的排查方式是查 naturalWidth
<img src="images/team/jane.jpg" alt="Jane Doe"> 看似保险，实则覆盖不了多数真实失败场景。浏览器只有在发起请求后收到非 200 响应（如 404、500）才触发 onerror；但以下情况它完全沉默：
- 路径语法错误，比如
src=" images/team/jane.jpg"（开头多空格），浏览器根本不发请求 - 服务端返回 200 状态但内容为空（PHP 脚本出错输出空白），
naturalWidth === 0，但onerror不触发 - 跨域资源未配 CORS，控制台报错但
onerror不执行
开发阶段快速定位：在控制台运行 Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有“加载完成但内容为空”的图片——这类问题只能靠人工核对路径或查服务端日志，onerror 对它完全无感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
