onerror 触发后图片会无限重试，因浏览器无内置防重入机制；需用元素属性标记（如this._loaded）或清空onerror事件处理器（img.onerror = null）来终止循环。
onerror 触发后为什么图片会无限重试
浏览器对 <img alt="HTML怎么在onerror中终止无限重试循环" > 的 onerror 处理有隐式行为：只要你在 onerror 里重新赋值 src（比如换一个备用地址），而新地址又加载失败，就会再次触发 onerror —— 没有内置防重入机制，于是形成死循环。
用 flag 变量阻止重复执行 onerror
最直接有效的方式是在首次触发时设一个标记，后续进入直接 return。注意这个 flag 必须绑定到元素自身或闭包中，不能是全局变量（多个图片会互相干扰）：
<img src="broken.jpg"
onerror="if (this._loaded) return; this._loaded = true; this.src='fallback.png';">
-
this._loaded是挂载在 DOM 元素上的自定义属性，轻量且隔离性好 - 必须把
this._loaded = true放在src赋值前，否则 fallback 再失败还会进一次 - 不要用
data-属性做 flag（如dataset.loaded），IE 和旧版 Safari 对它的读写有延迟或同步问题
更健壮的写法：用函数封装 + 移除事件监听
手动移除 onerror 比依赖 flag 更彻底，尤其适合需要复用逻辑的场景：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<img src="a.jpg" onerror="handleImageError(this)" alt="HTML怎么在onerror中终止无限重试循环" >
<script>
function handleImageError(img) {
if (!img._errored) {
img._errored = true;
img.onerror = null; // 关键：清空事件处理器
img.src = '/images/placeholder.svg';
}
}
</script>
-
img.onerror = null是终止重试最可靠的手段，比 flag 更底层 - 仍建议保留
img._errored判断，防止极端情况（如脚本被多次注入）下重复执行赋值逻辑 - 不要用
img.removeEventListener('error', ...)—— 因为 inlineonerror不是通过addEventListener绑定的，无法用该方式解绑
服务端兜底：用 HTTP 状态码避免前端重试
如果 fallback 图片本身也经常 404，前端拦截只是掩耳盗铃。真正要解决的是“为什么 fallback 还不可用”：
立即学习“前端免费学习笔记（深入）”；
- 确保 fallback 路径是静态资源，不依赖动态路由或权限校验
- Nginx/Apache 配置中，对图片目录启用
try_files或默认返回200 + placeholder，而不是让 404 透传到前端 - CDN 上配置「源站失败时返回备用 URL」，从网络层切断错误传播链
前端 onerror 是最后一道防线，不是容错主干。一旦发现 fallback 也在报错，优先查部署和路径配置，而不是堆更多 JS 判断。
