onerror无限循环的典型触发条件是fallback图也404且未执行this.onerror=null，导致浏览器反复加载失败图；常见诱因包括缺少null清除、路径错误、动态插入后未清理绑定、SSR与客户端重复监听。
onerror 无限循环的典型触发条件
当 onerror 回调里没清空自身，且 fallback 图也 404，浏览器就会反复尝试加载失败图 → 触发 onerror → 再换图 → 再失败。它不报错、不中断，只在 Network 面板里刷一堆 404 请求。
常见诱因包括：
-
onerror="this.src='/fallback.jpg'"缺少this.onerror=null - fallback 路径写错（比如漏了
/static/前缀），导致二次 404 - 动态插入
src，但未同步清理旧onerror绑定 - SSR 渲染时已带
onerror，客户端 hydration 后又通过 React/Vue 的 effect 重复绑定，造成双事件监听
如何快速确认是否陷入循环
打开 DevTools 的 Network 面板，过滤 Img 类型，刷新页面。如果看到同一张 fallback 图被连续请求 3 次以上（尤其带相同 query 参数如 ?t=123），基本就是循环了。
更直接的方法是控制台执行：
document.querySelectorAll('img').forEach(img => {
if (img.src && img.src.includes('fallback') && img.onerror) {
console.log('疑似循环 img:', img, '当前 onerror:', img.onerror.toString());
}
});
注意：动态绑定的 addEventListener('error', ...) 不会出现在 img.onerror 上，得查 getEventListeners(img)（仅 Chrome 支持）。
React/Vue 场景下避免重复绑定
服务端渲染的 useEffect 或 onMounted 去“重新挂载”错误处理逻辑——这会导致两个 onerror 同时存在，一个内联、一个 JS 绑定，fallback 失败时可能触发两次回调。
正确做法是：
- 只保留 HTML 内联写法：
onerror="this.src='/fallback.jpg'; this.onerror=null;" - 若必须 JS 控制（比如 fallback 图要根据主题色动态生成），改用
ref+useLayoutEffect（React）或onBeforeMount（Vue 3），且确保只执行一次 - 避免在列表渲染中对每个
img都写完整onerror字符串——用 CSS class 标记后统一委托处理，减少内联脚本体积
为什么 W3C Validator 查不到这个循环
因为 onerror 是运行时行为，Validator 只校验 HTML 结构合法性。它能发现
onerror 是否写了 null、fallback 路径是否存在，完全无感知。真正要盯住的是两件事：
- Network 面板里图片请求的实际 URL 和状态码
- DOM 元素上
onerror属性值是否还活着（执行img.onerror !== null）
后者最容易被忽略：很多人加了 this.onerror=null，却在 fallback 图加载成功前就执行了，或者被 try/catch 包裹后静默吞掉异常，结果 null 没设上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
