onerror死循环的根本原因是备用图也加载失败时，浏览器反复触发onerror处理逻辑：换src→404→再onerror→再换src……导致内存持续增长、标签页无响应。
onerror死循环的根本原因是什么
死循环不是代码写错了，而是备用图也加载失败时，浏览器会反复触发同一个 onerror 处理逻辑：新 src 发起请求 → 404 → 再进 onerror → 再换 src → ……内存持续增长，标签页最终无响应。这不是“偶尔卡一下”，而是确定性崩溃路径。
必须同时满足的三个防循环条件
只写 this.onerror=null 不够，只加 if 判断也不保险。真正闭环要三者齐备：
-
onerror必须内联在 HTML 标签里，动态绑定（如img.onerror = handler）在 Safari 和旧 Android WebView 中可能完全不触发 - 替换
src后必须立即执行this.onerror=null，顺序不能颠倒，分号不能省 - 备用图地址必须 100% 可达——推荐用内联 base64 SVG：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底绕过路径解析、跨域、CDN 配置错误等问题
动态插入的 <img> 怎么安全绑定
用 JS 创建的图片，onerror 必须在 appendChild() 之前赋值，否则首次加载失败事件已丢失，后续再绑也没用。更稳妥的做法是全局监听：
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 表示捕获阶段监听，否则部分浏览器无法捕获到 error 事件。
立即学习“前端免费学习笔记（深入）”；
为什么 alt 不能代替 onerror
alt 是语义和可访问性字段，只在图片不可见时由读屏器朗读或显示为文字；它不控制任何加载行为，也不响应网络失败。当 src 是空字符串、CORS 阻塞、或服务器返回 200 状态码的兜底页时，onerror 根本不会触发，此时只有 alt 能提供信息——但它解决不了白屏或裂图问题。两者职责完全不同，缺一不可。
onerror 逻辑完美，只要备用图本身因 file:// 协议、相对路径错位、CDN 路径未配置等原因不可达，整个降级链就断了。开发阶段必须用 Live Server 启服务，禁用双击打开 HTML 文件。 
