onerror无限循环的典型表现是页面卡死、内存暴涨、DevTools无响应甚至标签页崩溃；根因是备用图加载失败后未切断事件，导致重复触发，必须写成this.src='fallback'; this.onerror=null;且顺序不可颠倒。
onerror无限循环的典型表现和根因
页面卡死、内存暴涨、DevTools无响应，甚至标签页崩溃——这些不是偶然卡顿，而是 onerror 陷入无限递归的明确信号。根本原因只有一个：备用图（fallback）也加载失败，触发第二次 onerror，而你没切断它。
常见错误写法：onerror="this.src='fallback.png'" —— 看似简洁，但只要 fallback.png 路径错、404 或跨域，就会立刻进入死循环。浏览器不会自动拦截，也不会报错提示，只会默默吃掉内存。
更隐蔽的问题是路径拼写错误：比如写成 ./img/fallback.png 却忘了当前 HTML 在子目录下，实际请求的是 /sub/img/fallback.png，结果 fallback 自身就 404。
必须写的两行代码：防死循环硬性写法
可靠写法只有一种，且顺序不可调换：
立即学习“前端免费学习笔记（深入）”；
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 第一句赋新
src，必须用绝对路径或data:URI（推荐 base64 SVG，彻底规避路径风险） - 第二句
this.onerror=null必须紧接其后，分号不能少；延迟执行（如包在setTimeout里）等于没写 - 不要用
this.onerror=''或delete this.onerror，兼容性差，部分 Safari 不认
动态插入的 <img alt="HTML安全审计发现onerror循环如何修复" > 怎么安全绑定 onerror
内联写法（onerror="..."）对静态 HTML 最稳；但 JS 动态创建的 <img alt="HTML安全审计发现onerror循环如何修复" >，必须在 appendChild() 前完成事件绑定，否则首次加载失败时事件已丢失。
正确做法示例：
const img = document.createElement('img');
img.src = 'user-123.jpg';
img.onerror = function() {
this.src = 'data:image/png;base64,iVBORw0KGgo...';
this.onerror = null;
};
container.appendChild(img);
不推荐用 addEventListener('error', ...)：旧版 Safari 和 IE 对 error 事件支持不一致，且不冒泡，捕获需手动加 true 参数，可靠性远低于直接赋值 onerror。
为什么 <picture></picture> 里还白屏？兜底 <img alt="HTML安全审计发现onerror循环如何修复" > 的 src 必须可用
<picture></picture> 不是“多选一失败就降级”，而是“按顺序找第一个能解码的 <source></source>”；如果所有 <source></source> 都跳过，最终会尝试渲染内部的 <img alt="HTML安全审计发现onerror循环如何修复" > —— 但它的 src 若也 404，页面就只剩 alt 文本，视觉上就是白屏。
关键检查点：
-
<img alt="HTML安全审计发现onerror循环如何修复" >的src不能是相对路径拼错的./logo.jpg，也不能带查询参数如logo.jpg?format=webp - 必须指向一个静态、可直连、无重定向、返回 200 + 正确 MIME 的资源（例如 CDN 托管的占位图）
- 服务端渲染时，这个
src应在 HTML 输出阶段就确定，不能依赖 JS 后续注入
最省心的兜底地址是 base64 占位图，它不发网络请求，不受 CORS、CDN 故障或 DNS 影响——这点常被忽略，但恰恰是审计修复中最容易落地的加固点。
