onerror 一写就无限触发是因为备用图加载失败导致事件反复执行，形成死循环；必须用 this.dataset.loaded 或 this.onerror=null 标记已处理，并确保 fallback 图绝对可用。

onerror 为什么一写就无限触发

因为备用图（或 fallback 资源）本身也加载失败，onerror 会再次执行——而你没切断它，于是进入“换图 → 失败 → 再换图 → 再失败”的死循环。浏览器不会自动终止，内存持续增长，最终卡死或白屏。

常见错误写法与后果

这些写法看似能兜底，实则埋雷：

• onerror="this.src='fallback.png'"：没清事件监听，第二次失败继续进 onerror
• onerror="this.src='/img/missing.jpg'; this.onerror=undefined"：赋值顺序错，this.onerror=null 必须紧接在 this.src=... 后面，且用 null 不是 undefined
• onerror="document.getElementById('img2').src='fallback.png'"：没处理 img2 自身是否也会失败，同样可能循环

可靠写法必须满足三个条件

真正防住循环，得同时做到：

• 用 this.dataset.loaded 或 this.onerror=null 显式标记“已处理”，且写在同一语句块中、分号不省略
• 备用图必须可用：优先用内联 data:image/svg+xml;base64,...，彻底避开路径解析和跨域问题
• 所有图片路径统一为绝对路径（如 /img/logo.png），禁用 ./ 或 ../；本地开发务必用 Live Server，别双击打开 HTML 文件

动态创建的 img 元素容易漏掉的关键点

JS 创建的 <img alt="HTML标签中的onerror循环为何反复执行" >，onerror 必须在 appendChild() 前绑定。否则 DOM 插入后立刻触发加载，错误已在前一刻发生，事件监听器根本收不到。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

立即学习“前端免费学习笔记（深入）”；

正确顺序是：

const img = document.createElement('img');
img.src = '/img/real.jpg';
img.onerror = function() {
  if (!this.dataset.loaded) {
    this.dataset.loaded = '1';
    this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==';
  }
};
document.body.appendChild(img);

注意：不能用 img.setAttribute('onerror', '...')，它在某些环境下无法正确绑定作用域。

关键不是“换一张图”，而是“确保只换一次，且换的那张图一定不会失败”。多数人栽在第二步——以为 fallback 图放本地就稳了，结果路径错、协议拦、CDN 缓存 404，全都没逃过。