onerror 触发后图片无限重试是因为失败时在回调中重复设置相同src导致循环加载；应通过data-original-src存原始路径、data-error-handled标记状态，或用addEventListener+once:true避免重复触发。
onerror 触发后为什么图片会无限重试
浏览器在 <img alt="HTML如何用标记位终止onerror循环" > 标签加载失败时调用 onerror，但如果在该回调里又设置了相同的 src（比如 fallback 逻辑没改路径），就会再次触发 onerror，形成死循环。这不是 JS 事件冒泡问题，而是资源加载行为被反复触发。
用 data-src 或自定义属性做加载状态标记
最稳妥的方式是用一个属性记录“是否已尝试 fallback”，避免重复设置 src。不能依赖全局变量或闭包计数器——DOM 节点可能被复用、组件可能多次挂载。
- 把原始 URL 存在
data-original-src，失败时读取它并写入src，同时设data-error-handled="true" - 在
onerror回调开头加判断：if (this.dataset.errorHandled) return; - 不要用
src=""或src="javascript:void(0)"清空再赋值，某些浏览器仍会触发一次空加载错误
<img src="broken.jpg"
data-original-src="fallback.png"
onerror="if (!this.dataset.errorHandled) { this.src = this.dataset.originalSrc; this.dataset.errorHandled = 'true'; }">
用 error 事件监听器 + removeEventListener 终止
内联 onerror 不易解绑，推荐用 addEventListener('error', handler) 并在首次触发后立刻移除。
-
once: true选项最简洁：img.addEventListener('error', handler, { once: true }) - 若需兼容 IE，手动
removeEventListener，注意函数必须是同一个引用（不能用匿名函数） - 别在 handler 里修改
src后再调dispatchEvent(new Event('error'))—— 这会绕过once机制
服务端返回 204 或透明像素替代 404
真正治本的方法是让图片请求不报错：后端对缺失资源返回 204 No Content 或 1×1 透明 GIF base64（data:image/gif;base64,R0lGODlhAQABAAAAACw=）。这样 onerror 根本不会触发，也就不需要标记位。
立即学习“前端免费学习笔记（深入）”；
但要注意：CDN 或代理可能把 204 转成 200，或者对 data URL 做缓存策略干扰；实际部署前得用 curl -I 确认响应状态码。
