onerror死循环是因为错误回调中未切断触发链，导致备用资源再失败时重复调用自身；必须立即解绑onerror、设置降级标记或清空src后换新URL才能终止。
为什么 onerror 会死循环
当图片、脚本等资源加载失败，浏览器触发 onerror 回调；如果回调里又尝试加载同一个失败资源（比如重试 img.src），而新赋值仍失败，就会再次触发 onerror——形成无限递归。常见于未做加载状态标记或错误兜底的“自动重试”逻辑。
空函数本身不能切断死循环
写成 img.onerror = function() {} 或 img.onerror = () => {} 确实能阻止后续报错输出，但**它只屏蔽了错误处理逻辑，并不改变资源加载行为本身**。如果之前代码在 onerror 里写了 img.src = img.src 这类操作，空函数挡不住这行代码执行，死循环照旧。
真正起作用的是：在进入错误处理前，先确保不会重复触发加载动作。关键点有：
- 用布尔标记（如
isRetrying）阻止二次赋值 - 清空或重置
src再赋新值（避免浏览器复用缓存失败状态） - 错误回调中立即解绑自身（
event.target.onerror = null），最稳妥
onerror 中立即解绑自己最可靠
这是兼容性好、逻辑清晰、无副作用的做法。解绑后即使后续代码再触发加载失败，也不会再次进入该回调。
立即学习“前端免费学习笔记（深入）”；
<img id="myImg" src="broken.jpg" / alt="HTML怎么用空函数切断onerror死循环" >
<script>
const img = document.getElementById('myImg');
img.onerror = function() {
// 先解绑，防止任何后续触发
this.onerror = null;
// 再加载备用图（注意：不要用 this.src = this.src）
this.src = '/fallback.png';
};
</script>
注意：this.src = this.src 是高危写法——多数浏览器会直接复用上次失败状态，立刻再次触发 onerror，哪怕你刚解绑。改用明确的新 URL（哪怕加时间戳）更安全。
Vue/React 等框架里怎么防
框架组件常封装图片加载逻辑，容易在响应式更新时反复触发 onerror。核心原则不变：错误发生后，必须让后续渲染不再走“失败路径”。
例如 Vue 模板中：
<img :src="currentSrc" @error="handleError" / alt="HTML怎么用空函数切断onerror死循环" >
对应 JS 里要确保 handleError 执行后，currentSrc 已切换且不会再被重置回原失败地址：
- 用
ref或data记录是否已降级（如hasFallback） - 在
handleError中设hasFallback = true，并只在!hasFallback时才赋失败 URL - 避免在
computed或watch中无条件重置src
死循环往往不是因为没写空函数，而是没切断「错误 → 触发行为 → 再错误」这个链条。解绑、标记、换源，三者至少做到其一，空函数只是最后的保险丝。
