根本原因是备用图路径也404导致无限循环，必须写成this.src='fallback'; this.onerror=null立即切断事件链，推荐使用base64 SVG占位图避免路径依赖。
onerror无限触发的根本原因是什么
浏览器对 onerror 的设计是「只要图片加载失败就触发一次」，但它**不关心你换的备用图是否也失败**。所以 onerror="this.src='fallback.png'" 这种写法，一旦 fallback.png 本身 404 或路径错，就会再次触发 onerror，形成递归调用——内存持续增长，DevTools 卡死，页面无响应都是真实现象。
必须立即切断事件链的两种可靠写法
防死循环不是可选项，是硬性安全边界。以下写法都经过线上验证：
-
onerror="this.src='/img/placeholder.svg'; this.onerror=null;"—— 最简方案，this.onerror=null必须紧接在赋值后，分号不能省 -
onerror="if (!this.dataset.attempted) { this.dataset.attempted = '1'; this.src = 'data:image/svg+xml;base64,PHN2Zy...'; }"—— 用dataset打标更可控，适合需要区分首次/重试逻辑的场景
注意：不要用 typeof this.onerror === 'function' 判断，IE 和部分旧 Safari 下不可靠；也不要依赖 src.indexOf('fallback')，路径参数或 CDN 重写可能绕过判断。
为什么 base64 SVG 是 fallback 的最优解
90% 的“备用图也失败”，根源是路径解析问题：相对路径在不同路由下错位、file:// 协议拦截、CDN 缓存未命中、服务端未配 fallback 响应等。而 data:image/svg+xml;base64,... 是自包含的，不发网络请求，不走 CORS，不依赖服务器配置。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐最小占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg== - 生成方式：用在线工具转 PNG/SVG 为 base64，或构建时用脚本注入（避免手写长串出错）
- 尺寸建议控制在 30×30 以内，base64 字符串长度通常
动态创建的 img 元素容易漏掉的关键点
通过 document.createElement('img') 创建的元素，onerror 属性**必须在插入 DOM 前绑定**，否则首次加载失败已发生，事件监听器根本来不及注册。
- 错误写法：
const img = document.createElement('img'); img.src = url; container.appendChild(img); img.onerror = handler;→ 可能漏捕获 - 正确写法：
const img = document.createElement('img'); img.src = url; img.onerror = handler; container.appendChild(img); - 更稳妥：统一用
addEventListener('error', handler, { once: true })，{ once: true }天然防重
真正难排查的，往往不是 onerror 写得对不对，而是它压根没被绑定上——尤其在 React/Vue 的 useEffect/onMounted 里异步操作 DOM 时，时机稍晚就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
