onerror无限循环源于备用图404导致递归触发，必须用this.onerror=null切断链路，并优先采用base64内联SVG占位图防路径失效。
onerror无限循环为什么总在生产环境爆发
因为备用图路径本身也 404——浏览器加载 fallback.png 失败后再次触发 onerror，形成递归调用。内存持续增长，页面卡死，DevTools 可能直接崩溃。这不是小概率事件，而是路径管理松散时的必然结果。
常见诱因包括：
• 开发时用 ./fallback.png，上线后被解析成 https://domain.com/fallback.png（实际应为 /static/fallback.png）
• CDN 配置未同步，备用图 URL 返回 404 或 503
• 框架构建后相对路径被重写，但 onerror 字符串未更新
必须写的三行内联逻辑
静态 HTML 中唯一可靠写法是内联，且必须包含状态切断、路径校验、兜底保底三要素：
onerror="if (!this.src.includes('fallback')) { this.src = '/static/fallback.svg'; this.onerror = null; }"- 优先用
data:image/svg+xml;base64内联 SVG，彻底规避路径风险：onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;" - 绝对路径必须以
/开头，禁用./和../；服务端渲染输出的 HTML 必须确保该路径在 Nginx/Apache 中真实可访问
动态图片的 onerror 绑定时机陷阱
JavaScript 创建的 <img> 元素，onerror 必须在插入 DOM 前绑定，否则首次加载失败已发生，事件永远丢失。
错误写法：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const img = document.createElement('img');<br>img.src = 'user.jpg';<br>container.appendChild(img);<br>img.onerror = () => { ... }; // ← 太晚了，错误已触发
正确顺序：
const img = document.createElement('img');<br>img.onerror = e => { if (!e.target.dataset.fallbacked) { e.target.src = '/static/placeholder.svg'; e.target.dataset.fallbacked = '1'; } };<br>img.src = 'user.jpg';<br>container.appendChild(img);
全局 error 监听不能替代 onerror
window.addEventListener('error', handler, true) 能捕获未显式处理的资源失败，但它不区分 <img>、<script></script>、<link>，也不提供原生 onerror 的上下文隔离能力。
关键限制：
• 它无法响应 CORS 阻塞（只报错，不触发 event）
• 对 <source></source> 标签无效（无 src 属性，不能赋值）
• 无法阻止默认裂图图标闪现，视觉降级滞后
• 若与内联 onerror 同时存在，需用 dataset 打标避免重复执行
真正需要它的地方只有一个：覆盖动态插入、未加内联 onerror 的脚本或图片，作为最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
