根本原因是备用图路径也404导致无限递归触发onerror事件，必须用this.onerror=null立即截断事件链，否则会内存暴涨、页面卡死。
onerror 无限触发的根本原因是什么
浏览器在 img 加载失败（如 404、CORS 拒绝、格式损坏）时会触发 onerror，但如果新赋值的 this.src 也加载失败，事件会再次触发——这不是“重试”，而是无终止的递归调用。内存暴涨、DevTools 崩溃、标签页卡死都是真实后果。
常见误判点：
- 认为
onerror="this.src='fallback.png'"就够了 - 把 fallback 图路径写成相对路径但未部署，或带查询参数（如
logo.png?v=2）导致 CDN 返回 406 - 忘记 fallback 图本身也要能被浏览器直接访问（比如放在
/assets/下却没配静态资源路由）
必须写的截断操作：this.onerror=null 是硬性要求
只要没写 this.onerror=null，就等于给死循环开了绿灯。它不是“建议”，是唯一阻止重复触发的 DOM 层机制。
正确写法只有这一种基础形式：
<img src="icon.webp" onerror="this.src='/assets/placeholder.svg'; this.onerror=null" alt="Icon">
进阶防护（防 fallback 也失效）：
- 加路径判断：
onerror="if (!this.src.includes('placeholder')) this.src='/assets/placeholder.svg'; this.onerror=null" - fallback 图用 base64 内联 SVG，彻底规避网络请求：
this.src='data:image/svg+xml;base64,PHN2Zy...' - 所有 fallback 资源必须走绝对路径（
/assets/...），避免相对路径在不同路由下解析失败
动态插入图片时不能只靠内联 onerrordocument.createElement('img') 后再设置 onerror 属性，在 Safari 和旧 Edge 中大概率不触发；而内联写法又无法在 JS 动态生成时拼接。
可靠做法是用 addEventListener，但要注意：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须在
img.src赋值之前绑定，否则可能错过错误事件 - 绑定后立即设
img.onerror = null（注意：这是清除属性级 handler，不影响 addEventListener） - 更稳妥的是用标记位控制：
img.dataset.fallbacked = 'true'，并在 handler 中检查
示例：
const img = document.createElement('img');
img.addEventListener('error', function handler(e) {
if (e.target.dataset.fallbacked) return;
e.target.src = '/static/fallback.jpg';
e.target.dataset.fallbacked = 'true';
});
img.src = userAvatarUrl;为什么全局 error 监听不能替代 onerror 截断document.addEventListener('error', ...) 确实能捕获所有 img 错误，但它：
- 不区分是首次加载失败还是 fallback 失败，容易重复降级
- 无法保证执行时机早于浏览器渲染破裂图（用户会先看到红叉再闪成 placeholder）
- 对 <source></source> 元素无效（它没有 src 属性，不能直接改）
- 在某些浏览器中不冒泡，需用捕获阶段监听且仍不可靠
真正需要截断死循环的场景，只发生在单个 img 的生命周期内，必须在该元素上做原子级控制。
最易被忽略的一点：即使你写了 this.onerror=null，如果 fallback 图的 URL 是空字符串、about:blank 或协议不匹配（如 http 页面里写 https fallback 且被混合内容拦截），依然会触发第二次 onerror——因为这些情况也属于“加载失败”。务必确保 fallback 地址是静态、可直连、同协议的资源。
