onerror一写就卡死是因为fallback图也404或跨域导致无限循环，必须用this.src='data:image/svg+xml;base64,...'; this.onerror=null;切断事件链并消除网络请求。
onerror 一写就卡死，不是跨域问题本身，而是 fallback 图也跨域或 404 导致无限重试——必须切断事件链 + 换掉网络请求。
为什么跨域图片的 onerror 容易死循环
跨域图片（比如 CDN 上的 
onerror 会触发，但很多人直接写 onerror="this.src='fallback.png'"。问题在于：fallback.png 如果也跨域、路径错、或返回 404，浏览器会再次触发 onerror，形成“换源→失败→再换源→再失败”的递归。它不报错，只吃内存、卡主线程、最终页面无响应。
更隐蔽的是：CORS 阻塞（如没加 crossorigin）时，onerror 根本不触发——你连降级机会都没有；而服务器返回 200 状态码的兜底 HTML 页面（如 Nginx 的 404.html），浏览器也认为“成功”，onerror 同样静默跳过。
- 真正能进
onerror的，只有“发出了请求且收到非 2xx 响应”（如 403/404/500） - 跨域图片若要让
onerror可靠触发，必须显式声明crossorigin属性 - 但即使加了
crossorigin，fallback 资源仍需满足：可访问、无跨域限制、不依赖当前域名解析
onerror 内联写法必须带 this.onerror=null 且用 data URL
静态 HTML 中最稳的写法，是把 fallback 彻底变成无网络请求的内联资源。SVG base64 是首选，因为它体积小、可缩放、无跨域风险、不触发新请求：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"
关键点：
-
this.onerror=null必须紧跟在this.src=...后面，分号不能少，顺序不能颠倒 - 绝对不要用相对路径（如
./fallback.svg）或协议相对 URL（如//cdn.example.com/fallback.svg），它们在跨域上下文里极易解析失败 - 避免调用外部函数（如
onerror="handleError(this)"），函数未定义会导致事件静默丢失 - 如果 fallback 需要主题色或尺寸适配，用内联 SVG 的
或属性动态改，别换 PNG/JPEG
动态创建的 img 元素怎么安全绑定 onerror
JS 创建的 appendChild() 再绑 onerror 是高危操作——DOM 插入瞬间就可能完成加载并失败，事件监听器根本来不及注册。
正确做法是在设置 src 前，就完成事件绑定：
const img = new Image();<br>img.onerror = function() {<br> if (!this.dataset.fallbacked) {<br> this.dataset.fallbacked = '1';<br> this.src = 'data:image/svg+xml;base64,...';<br> }<br>img.src = 'https://cdn.example.com/photo.jpg';<br>container.appendChild(img);
注意：
- 用
dataset打标比计数更可靠，避免重复降级 - 不要用
img.onerror = function() {...}后续再赋值覆盖，会导致监听器丢失 - 若需多级 fallback（CDN → 本地 → data URL），最多尝试 2 次，第 3 次直接设空
src并移除onerror - 全局监听
document.addEventListener('error', ...)在 Safari 和旧 Edge 中不可靠，且无法精准定位元素，不推荐作为主方案
哪些情况 onerror 根本不会触发，却常被误判为“失效”
很多开发者反复检查 onerror 写法，却始终看不到 fallback，是因为压根没进到事件逻辑。以下场景中，onerror 是沉默的：
-
src是空字符串、undefined或纯空格 —— 浏览器不发请求，无错误可捕获 - 跨域图片没加
crossorigin属性 —— 控制台报 CORS 错误，但onerror不触发 - 服务器返回 200 状态码的兜底页（如 CDN 自动返回占位图 HTML）—— 浏览器认为“加载成功”
- 图片文件头正常但数据损坏（如 JPEG 截断）—— 行为不统一，部分浏览器不触发
onerror，需靠naturalWidth === 0检测
真正该盯住的，永远是原始 src 是否拼对、是否在目标环境（CDN / 本地开发 / file://）下真实可访问，而不是堆砌更多 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
