onerror不总管用是因为它只响应资源请求发出后的失败，不触发于空src、undefined、解析错误或CORS阻止响应体等场景；必须确保src为合法字符串并用this.onerror=null防死循环。
img 的 src 失败时为什么 onerror 不总管用
浏览器对 src 加载失败的判定比想象中严格：网络超时、403/404、CORS 阻止读取响应体、甚至某些 CDN 返回 200 空内容，都可能触发 onerror；但若图片是空 URL、src 为 undefined 或解析阶段就报错（比如写成 src={{url}} 却未渲染），onerror 根本不会执行。
实操建议：
- 始终确保
src是合法字符串（非null、非空格、非未定义） - 在绑定
onerror前，先用console.log检查初始src值是否符合预期 - 避免在 Vue/React 模板中直接写
@error="handle"却没做 props 默认值兜底
用 onerror 替换 src 的正确写法
最简降级逻辑是：图片加载失败 → 把 src 改成备用图地址 → 清除 onerror 自身，防止循环触发（比如备用图也挂了）。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<img src="https://api.example.com/photo.jpg"
onerror="this.src='https://cdn.example.com/placeholder.png'; this.onerror=null;"
alt="用户头像">
关键点：
-
this.onerror=null必须写，否则备用图再失败会再次调用该 handler，造成无限循环或控制台报错 - 不要在
onerror中调用外部函数（如handleImageError()），除非已全局定义且确保无依赖问题 - 备用图地址建议用绝对路径或带版本号的静态资源（如
/img/placeholder-v2.png），避免相对路径在不同路由下解析错误
CSS background-image 降级不走 onerror 怎么办
CSS 层面没有原生事件机制，无法监听 background-image 是否加载失败。常见错误是试图给 div 绑 onerror —— 它只对 <img> 元素有效。
可行方案：
- 改用
<img>+ CSS 覆盖（如position: absolute铺满容器），获得事件能力 - 服务端渲染时预检图片 URL，失败则直接输出备用图 class（如
class="avatar--fallback"） - 用 JS 主动 fetch 图片 URL，根据 HTTP 状态码决定是否应用 fallback class，但注意跨域限制和性能开销
现代方案：loading="lazy" 和 decoding="async" 对降级的影响
这两个属性本身不干扰 onerror，但会影响触发时机：延迟加载的图片在进入视口前不会发起请求，也就不会触发 onerror；而 decoding="async" 可能让解码失败更早暴露（尤其 WebP 在旧 Safari 上）。
建议：
- 对关键展示图（如商品主图、头像）慎用
loading="lazy"，避免用户看到空白再等降级生效 - 若必须懒加载，可在
IntersectionObserver回调中手动设置src并监听onerror，而不是依赖 HTML 内联写法 - WebP 降级到 JPEG/PNG 时，确保备用图路径与原图同域名，避免因 CORS 导致二次失败
onerror 更容易让降级失效。 
