onerror="this.src='fallback.jpg'" 会卡死是因为备用图也404时触发无限循环：新src失败→再进onerror→再换src；必须紧接this.onerror=null终止事件，且推荐用includes('fallback')判重+内联SVG兜底。
onerror="this.src='fallback.jpg'"为什么一写就卡死
因为备用图也 404 时，onerror 会再次触发，形成无限循环：新 src 加载失败 → 再进 onerror → 再换 src……浏览器内存暴涨、DevTools 崩溃、标签页无响应都是真实发生过的现象。
这不是“偶尔出问题”，而是只要 fallback 路径不可靠，就必然发生。关键不是换不换图，而是换完必须让事件处理器彻底失效。
-
this.onerror = null必须紧接在this.src = '...'后面，且用分号隔开，顺序不能颠倒 - 绝对不要只写
onerror="this.src='fallback.jpg'"—— 这等于没写防循环 - 如果 fallback 图路径本身拼错（比如
./img/placeholder.svg实际应为/img/placeholder.svg），照样卡死
最稳妥的内联 onerror 写法
静态 HTML 中唯一跨浏览器稳定的写法，就是直接写在标签里，并带状态隔离：
<img src="icon.webp" onerror="if (!this.src.includes('fallback')) { this.src = '/img/fallback.svg'; this.onerror = null; }" alt="Icon">
这个写法同时解决三个问题：防重复、路径判别、兜底可控。其中 includes('fallback') 是轻量级标记，比 dataset 更早生效（避免首次渲染前就被触发）。
立即学习“前端免费学习笔记（深入）”；
- 推荐 fallback 使用
data:image/svg+xml;base64,...内联 SVG，彻底规避路径风险 - 绝对路径优先（如
/img/placeholder.svg），避免 base URL 解析错乱 - 不要用相对路径拼接变量（如
./assets/${name}.png），服务端渲染时容易漏转义
动态插入的 img 怎么安全绑定 onerror
用 document.createElement('img') 创建后才绑定 onerror，大概率来不及——错误在 appendChild() 后瞬间触发，事件直接丢失。
正确做法只有两种：
- 创建后立即赋值：
img.onerror = () => { img.src = 'data:image/svg+xml;base64,...'; img.onerror = null; }; - 全局捕获（推荐）：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true)，true表示捕获阶段，能命中所有后续插入的<img>
注意：动态场景下，addEventListener 比内联属性更可靠，尤其在 Safari 和旧 Android WebView 中。
哪些情况 onerror 根本不会触发
onerror 只响应“请求发出后失败”（HTTP 状态非 2xx），对以下常见白屏原因完全静默：
-
src为空字符串、undefined或纯空格 → 浏览器不发请求，无事件 - CORS 阻塞（比如外链图床未配
crossorigin）→ 控制台报错，但onerror不触发 - 服务器返回 200 + 占位图（如某些 CDN 的 404 自动兜底）→ 浏览器认为“加载成功”
- JPEG 文件头正常但数据损坏 → 行为不一致，部分浏览器触发，部分不触发
这些情况无法靠 onerror 拦截，得靠 img.naturalWidth === 0 检测、预加载占位图、或服务端统一响应策略补位。
