先通过开发者工具检查<img>标签的src属性值，确认实际引用路径；注意相对路径解析受HTML所在目录影响、大小写敏感及<picture>中多源替换需同步更新。
怎么定位团队图片在HTML中的真实路径
别急着替换文件，先确认当前页面到底引用了哪张图。打开浏览器开发者工具（F12），右键团队照片 → “检查”，看它对应的 <img> 标签里 src 的值是什么。常见陷阱包括：
• 路径写成 images/team/alex.jpg，但 HTML 文件实际在 about/ 子目录下，导致解析为 about/images/team/alex.jpg；
• 混用 ./images/ 和 images/，二者在不同入口页行为不一致；
• 服务器区分大小写，TEAM/ 和 team/ 是两个目录。
只改图片不改HTML时必须守住的三个硬条件
直接覆盖原图是最少出错的方式，但必须同时满足：
• 新图尺寸与原图接近（如原为 400×500，新图别用 1920×1080，否则 object-fit: cover 或 CSS 裁剪逻辑会意外截掉关键区域）；
• 扩展名完全一致（lisa.jpg 不能换成 lisa.png，除非你同步改了所有 src 和 srcset）；
• 文件名一字不差（james.jpg ≠ james_v2.jpg，后者会导致 404，且不会触发 onerror 降级——因为路径本身合法，只是文件不存在）。
响应式模板里漏掉 srcset 或 <picture> 就等于没换
现代团队页常通过 <picture> 提供多分辨率图，只换 <img src> 主图，小屏用户缩放或切设备时仍看到旧照。检查是否存在类似结构：
<picture><br> <source media="(min-width: 768px)" srcset="images/team/alex-lg.jpg"><br> <source media="(max-width: 767px)" srcset="images/team/alex-sm.jpg"><br> <img src="images/team/alex.jpg" alt="Alex Chen"><br></picture>此时需一并替换三处文件：
alex-lg.jpg、alex-sm.jpg、alex.jpg，且确保内容一致、宽高比协调。漏掉任意一个，都会在对应条件下暴露旧图。
为什么 onerror 降级经常失效
<img onerror="this.src='placeholder.svg'"> 看似万能，实则脆弱：
• 如果路径语法错误（如多了一个空格：src=" images/team/alex.jpg"），浏览器根本不会发起请求，onerror 不触发；
• 如果服务器返回 200 状态但内容为空（比如 PHP 脚本出错输出空白），naturalWidth 为 0，但 onerror 也不触发；
• 开发阶段可快速筛查：在控制台运行 Array.from(document.images).filter(i => i.naturalWidth === 0)，列出所有“加载成功但内容为空”的图——这类问题 onerror 完全无感，只能靠人工核对或服务端日志。
立即学习“前端免费学习笔记（深入）”；
