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 自身，防止循环触发（比如备用图也挂了）。

示例代码：

@@##@@

关键点：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• this.onerror=null 必须写，否则备用图再失败会再次调用该 handler，造成无限循环或控制台报错
• 不要在 onerror 中调用外部函数（如 handleImageError()），除非已全局定义且确保无依赖问题
• 备用图地址建议用绝对路径或带版本号的静态资源（如 /img/placeholder-v2.png），避免相对路径在不同路由下解析错误

CSS background-image 降级不走 onerror 怎么办

CSS 层面没有原生事件机制，无法监听 background-image 是否加载失败。常见错误是试图给 div 绑 onerror —— 它只对 <img src="https://api.example.com/photo.jpg?x-oss-process=image/resize,p_40" onerror="this.src='https://cdn.example.com/placeholder.png'; this.onerror=null;" alt="用户头像"> 元素有效。

可行方案：

• 改用 <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 导致二次失败

备用图逻辑看着简单，真正上线后常被忽略的是：CDN 缓存了失败响应（比如 404 页面 HTML 被当成图片返回）、备用图本身未压缩导致加载更慢、或者多个组件共用同一张 placeholder 却没加 cache-busting 参数。这些细节比写对 onerror 更容易让降级失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！