onerror属性仅对内联写法稳定生效，动态绑定兼容性差；必须用this.onerror=null防死循环，且仅响应资源请求失败，不覆盖空src、cors阻塞等场景。
onerror 属性只对 <img> 标签内联写才稳定生效
浏览器对动态绑定的 onerror 支持不一致：用 img.onerror = handler 或 addEventListener('error', ...) 在部分 Safari 和旧 Edge 中可能完全不触发。真正跨浏览器可靠的，只有直接写在 HTML 标签里的内联写法。
-
onerror不会冒泡，document.addEventListener('error', ...)捕获不到它（除非手动在捕获阶段监听且检查e.target.tagName === 'IMG'） - Vue/React 等框架里用
@error或onError是封装层逻辑，最终仍要落到 DOM 的内联或属性赋值上 - 服务端渲染（SSR）输出的静态 HTML 必须带内联
onerror，否则首屏加载失败时 JS 还没执行，就来不及兜底
防死循环是硬性要求，不是可选项
onerror="this.src='fallback.png'" 看似简洁，但只要 fallback.png 也 404，就会无限触发自身 —— 浏览器卡顿、内存暴涨、DevTools 崩溃都是真实发生过的现象。
- 必须立即切断事件：写成
onerror="this.src='fallback.png'; this.onerror=null" - 更稳妥的写法是加路径判别：
onerror="if (!this.src.includes('fallback')) this.src='fallback.png'; this.onerror=null" - 如果连 fallback 图都不可信（比如路径也拼错），建议直接用 base64 占位图兜底：
data:image/png;base64,iVBORw0KGgo...
什么情况 onerror 根本不会触发
很多开发者反复检查代码却找不到问题，是因为根本没进到 onerror 逻辑 —— 它只响应“资源请求发出后失败”，不覆盖所有“图片没显示”的场景。
- 空
src、src=""、src=" "：浏览器不发请求，不触发onerror - CORS 阻塞（如外链图床未配
crossorigin）：控制台报Blocked by CORS policy，但onerror不触发 - 服务器返回 200 + 占位图（例如某些 CDN 对 404 自动返回兜底图）：请求成功，不算“加载失败”
- 图片文件头正常但数据损坏（如截断的 JPEG）：部分浏览器触发，部分不触发，行为不统一
路径错误才是最大隐形杀手，别急着写 JS
80% 的“图片加载失败”问题，根源不在 onerror 写得对不对，而在 src 路径本身错了。本地开发和生产环境路径解析规则不同，很容易踩坑。
- 本地开发一律用
./xxx.png，避免xxx.png被按根路径解析 - Linux 服务器严格区分大小写：
IMG.JPG≠img.jpg - 跨域图片若需
onerror可控，必须显式加crossorigin属性：<img src="https://cdn.example.com/a.jpg?x-oss-process=image/resize,p_40" crossorigin> - 查问题第一步永远是打开 DevTools → Network → 刷新，确认该图片请求状态码是不是 404/403；如果不是，
onerror就不该是你的第一反应
onerror 完全沉默，只能靠服务端配合返回真正的图片，或前端用 naturalWidth === 0 配合定时检测做二次兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
