onerror循环必须提前防住，关键在fallback路径绝对化、事件绑定后立即置null或移除、优先用base64内联占位图；一旦触发两次以上，标签页即卡死或崩溃。
onerror 循环不是“发生了就难查”，而是只要触发两次以上，浏览器标签页基本就卡死或崩溃——所以检查重点不是“怎么定位”，而是“怎么提前防住、快速确认是否已发生”。
怎么一眼判断 onerror 正在循环
打开 DevTools → 切到 Performance 或 Memory 面板 → 点录制 → 刷新页面或触发图片加载 → 停止录制。如果看到大量重复的 HTMLImageElement.error 事件（间隔
更直接的方式：在 Console 执行 console.log(window.onerror)，如果输出是内联字符串（如 function (e) { this.src='fallback.jpg'; this.onerror=null; }），说明没被覆盖；但如果反复执行 document.querySelectorAll('img').forEach(i => console.log(i.onerror)) 发现多个 img 的 onerror 属性值为空或变成 null，大概率已有元素掉进循环后被清空了回调，但 fallback 图本身又失败了。
为什么 fallback 图路径一错就停不下来
-
onerror="this.src='fallback.png'"没加this.onerror=null→ fallback.png 404 后再次触发onerror，形成无限递归 - fallback 图用了相对路径（如
./assets/placeholder.png），而当前 HTML 是通过file://协议双击打开的 → 浏览器把./解析成系统根目录，请求直接失败 - fallback 图地址带查询参数（如
/img/placeholder.png?v=1.2），但 CDN 配置了缓存 404 响应 → 第一次 404 被缓存，后续所有请求都秒返回 404，onerror持续触发 - 服务端对 404 自动返回一个“兜底页”（如 Nginx 的
error_page 404 /404.html），且该页 MIME 类型是text/html→ 浏览器认为图片加载“成功”，不触发onerror，但图片区域空白——你以为是 onerror 没生效，其实是根本没进这个逻辑
富文本编辑器里怎么安全绑定 onerror
编辑器动态插入 <img alt="HTML富文本编辑器生成onerror循环如何检查" > 时，onerror 必须在 appendChild() 前完成绑定，否则首次加载失败的瞬间事件就丢失了。
立即学习“前端免费学习笔记（深入）”；
推荐写法（不用内联属性，避免字符串拼接和作用域混乱）：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
const img = document.createElement('img');
img.src = userProvidedSrc;
img.addEventListener('error', function handler() {
if (this.dataset.fallbacked) return;
this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==';
this.dataset.fallbacked = 'true';
this.removeEventListener('error', handler);
});
container.appendChild(img);
关键点：
- 用
addEventListener而非onerror=，防止动态插入时上下文丢失 - fallback 用 base64 内联 SVG，彻底规避路径错误和跨域问题
- 用
dataset.fallbacked标记 +removeEventListener双保险，比this.onerror=null更可靠 - 不依赖
this.src.includes('fallback')这类字符串判断——用户可能把原始图也命名为 fallback_xxx.png
服务端渲染（SSR）首屏图片怎么防循环
SSR 输出的 HTML 是静态的，JS 还没执行，onerror 必须靠内联属性兜底，但内联写法极易出错。
必须检查：
- 所有 SSR 输出的
<img alt="HTML富文本编辑器生成onerror循环如何检查" >标签，onerror属性是否都含this.onerror=null，例如：onerror="this.src='/static/placeholder.svg'; this.onerror=null" - fallback 路径是否为绝对 URL（如
/static/...），而非./或../—— SSR 渲染时路径解析上下文与客户端 JS 不同 - CDN 是否对 fallback 图做了强制缓存（
Cache-Control: public, max-age=31536000），避免因缓存 404 导致无限重试 - 如果 fallback 图由后端动态生成（如
/api/placeholder?w=200&h=200），确保该接口 100% 可用，且返回状态码是 200 + 正确 MIME 类型（image/svg+xml或image/png）
最省事的底线：所有 SSR 输出的 src 和 onerror 中的 fallback 地址，都手动粘贴到新标签页访问一遍，确认返回 200 且能正常显示。
