onerror无限循环的根源是备用图路径也404导致二次失败，浏览器会再次触发onerror；必须写成onerror="this.src='fallback.svg'; this.onerror=null;"，分号不能省、顺序不能颠倒，且fallback图须绝对路径或base64确保可达。
onerror无限循环的根源是什么
浏览器对 onerror 的响应非常“诚实”：只要 src 加载失败（404、跨域拒绝、格式损坏等），就触发一次回调；而你在回调里又改了 src，如果新地址也失败，它会再次触发——这不是 bug，是设计如此。你写的 onerror="this.src='fallback.png'" 看似简单，实则埋了递归炸弹。
必须加 this.onerror=null 才算真正切断
这是唯一能阻止死循环的硬性操作，不是可选项，也不是“建议”。不写这句，哪怕 fallback 图只失败一次，页面就可能卡住或内存暴涨。
-
onerror属性必须写成单行完整表达式：onerror="this.src='/img/placeholder.svg'; this.onerror=null;" - 分号不能省，顺序不能颠倒——
this.onerror=null必须紧接在src赋值之后 - 推荐用绝对路径或 base64 SVG，彻底规避路径解析错误导致的二次 404，例如：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==
动态插入的 <img alt="HTML遇到图片onerror死循环怎么办？化解无限循环通用策略" > 怎么安全绑定
用 JS 创建 document.createElement('img') 后再设 onerror，大概率失效——因为图片加载失败可能发生在 onerror 绑定之前。此时事件已丢失，降级逻辑完全不触发。
- 必须在
appendChild()或插入 DOM 前，就完成事件绑定：img.onerror = () => { img.src = placeholder; img.onerror = null; }; - 或者统一用
document.addEventListener('error', ...)全局捕获，但需严格判断e.target instanceof HTMLImageElement并检查dataset.fallbacked标记 - 避免用字符串形式的
onerror属性拼接，动态场景下容易引号混乱或执行上下文丢失
为什么打 dataset 标记比 onerror=null 更可靠
this.onerror=null 是最简解法，但它无法区分“第一次失败”和“重试后仍失败”。当你要做多级降级（原始 URL → CDN → 本地 → SVG）时，仅靠清空 onerror 不够用。
立即学习“前端免费学习笔记（深入）”；
- 用
dataset.retryCount或dataset.loaded显式记录状态，比如：if (!this.dataset.retryCount) { this.dataset.retryCount = '1'; this.src = '/cdn/icon.png'; } - 第 2 次失败时检查
dataset.retryCount === '1'，再换本地路径；第 3 次直接设透明图并移除事件：this.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAACAkQBADs='; this.onerror = null; - 这个模式能防止 CDN 故障 + 本地路径错配 + 占位图未预加载三重叠加导致的白屏，比单次切断更可控
