onerror死循环表现为页面卡死、标签页无响应、内存飙升甚至浏览器崩溃，Network面板可见fallback请求反复404/500，Performance面板显示大量重复layout/paint；根源在于fallback资源本身不可用或onerror=null未及时置空，正确写法必须是this.src='fallback.svg'; this.onerror=null。
onerror死循环的典型表现
页面卡死、标签页无响应、内存占用飙升，甚至浏览器崩溃；控制台可能没报错，但 Network 面板里能看到 fallback 图反复发起请求（状态码 404/500），或者 DevTools 的 Performance 面板显示大量重复的 layout + paint 任务。
为什么this.onerror=null必须写在赋值后面
浏览器执行 onerror 属性内联脚本时，是按顺序逐条解析的。如果只写 this.src='fallback.png'，而 fallback 资源也加载失败，事件会立刻再次触发——此时 this.onerror 还没被设为 null，于是进入下一轮调用。
- ✅ 正确顺序：
onerror="this.src='/fallback.svg'; this.onerror=null;" - ❌ 错误写法：
onerror="this.onerror=null; this.src='/fallback.svg';"（赋值前就断开了，fallback 失败不触发） - ❌ 危险写法：
onerror="this.src='/fallback.png'"（缺this.onerror=null，必循环）
如何验证 fallback 图本身是否可靠
死循环往往不是逻辑写错，而是 fallback 路径不可用。别假设它“肯定能行”，要实测：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 把
src值粘贴到浏览器地址栏直接访问，看是否返回 200 + 正确 Content-Type（如image/svg+xml） - 避免相对路径：用
/assets/placeholder.svg而非./placeholder.svg或../img/fallback.jpg - 优先用内联 base64 SVG：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAi...，彻底绕过路径和服务器问题 - 禁用 JS 后刷新页面，确认 fallback 图仍能加载——这是检验它是否真正“兜底”的关键一步
动态插入图片时的特殊陷阱
用 document.createElement('img') 创建后才绑定 onerror，容易漏掉首次错误：元素插入 DOM 后，浏览器会立即尝试加载 src，若此时网络已断或路径错，错误在事件绑定前就发生了，onerror 永远不会触发。
立即学习“前端免费学习笔记（深入）”；
- 必须在
appendChild()前完成绑定：img.onerror = () => { img.src = '...'; img.onerror = null; }; - 不要用
addEventListener('error', ...)替代内联onerror—— Safari 和旧 Edge 对动态绑定的 error 事件支持极差 - 若用框架（如 React/Vue），确保
onError处理函数在组件挂载且img元素真实渲染后才生效，而非仅在 JSX 中声明
