onerror="this.src='fallback.jpg'"会卡死是因为fallback.jpg若也加载失败，将反复触发onerror导致无限循环；必须写成this.onerror=null或用dataset标记防重复，并确保备用图100%可达。
onerror="this.src='fallback.jpg'"为什么会卡死
这行代码看似能兜底，实际是典型陷阱：只要 fallback.jpg 也 404、跨域失败或路径错误，浏览器就会再次触发 onerror，形成无限循环。内存占用飙升、DevTools 卡死、甚至整个标签页无响应，都是真实发生过的现象。
必须立即切断事件链的两种写法
防死循环不是可选项，而是硬性前提。以下任一写法都需确保备用图本身 100% 可访问（推荐用内联 data:image/svg+xml;base64,...）：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null"-
onerror="if (!this.dataset.fallbacked) { this.dataset.fallbacked = '1'; this.src = '/img/placeholder.svg'; }"（更推荐，避免重复标记）
动态创建的 <img alt="HTML怎么处理onerror引起的死循环？避免死循环操作步骤" > 怎么绑定才不丢首次错误
用 document.createElement('img') 创建后，如果先 appendChild() 再绑定 onerror，首次加载失败时事件早已触发完毕，根本捕获不到。正确顺序是：
- 创建元素：
const img = document.createElement('img') - **立刻**绑定：
img.onerror = function() { this.src = 'data:...'; this.onerror = null; } - 最后插入：
container.appendChild(img)
不能用 img.setAttribute('onerror', '...')，它会转成字符串执行，无法访问闭包或 this 上下文。
立即学习“前端免费学习笔记（深入）”；
哪些情况 onerror 根本不会触发
别默认“所有加载失败都能进 onerror”，它只对网络请求失败（如 404、500、连接中断）有效。以下场景它完全沉默：
-
src为空、undefined或纯空格 —— 浏览器压根不发请求 - CORS 阻塞（控制台报错但
onerror不触发） - 服务器返回 200 状态码的兜底页（比如 Nginx 的
error_page 404 /missing.png） - 图片文件头正常但数据损坏（
img.naturalWidth === 0才能检测）
真正鲁棒的降级，得靠 dataset 标记 + 内联占位图 + 绝对路径三者闭环，少一个就可能在某个环境里白屏。
