根本原因是备用图也加载失败且未切断事件绑定，必须写成onerror="this.src='fallback'; this.onerror=null;"，用base64或绝对路径确保fallback可达，并提前绑定事件。
onerror无限循环的根源是什么
根本原因只有一个：备用图地址也加载失败，触发第二次 onerror，而你没切断事件绑定。浏览器不会自动停止，它会持续尝试、重赋值、再失败、再触发——内存暴涨、标签页卡死甚至崩溃都是真实发生过的现象。这不是“偶尔出错”，而是写法错误导致的确定性问题。
它只在以下条件同时满足时爆发：
- onerror 内只写了 this.src = 'fallback.jpg'
- 备用图本身不可访问（404 / 路径错 / CDN未部署）
- 没有后续任何防重逻辑
必须执行的三步防死循环设置
这是经过 Safari、Chrome、Firefox 和 Edge（2026 年主流版本）验证的最小可行防护组合：
- 替换
src后**立刻**执行this.onerror = null，顺序不能颠倒，分号不能省 - 备用图地址必须真实可访问——推荐用 base64 占位图或已预验证的 CDN 地址，比如
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjZGRkIi8+PC9zdmc+ - 对动态插入的
appendChild()前就设好onerror属性，否则可能来不及绑定就已报错
更稳妥的写法：加路径判别防误触
单纯靠 this.onerror = null 能防死循环，但无法避免“原始图和备用图来回切”的抖动。加一层判断更可控：
onerror="if (!this.src.includes('fallback') && !this.src.includes('data:image')) { this.src = '/assets/fallback.svg'; this.onerror = null; }"
这个判断能拦住两种常见误触发：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 已经是备用图地址，不再重复赋值
- 已经是 base64 占位图，直接放弃降级，防止 SVG 解析失败再进一次 error
为什么 document.addEventListener('error') 不够用
全局监听 error 事件看似一劳永逸，但它有几个硬伤：
-
onerror属性不冒泡，必须用捕获阶段监听：document.addEventListener('error', handler, true)
- 无法区分是
<script></script>或出错，得手动过滤e.target.tagName === 'IMG'
- 对
src属性，不能直接换源
- 动态渲染框架（如 React/Vue）中容易和数据流冲突，引发重复赋值或渲染循环
真正首屏鲁棒性最强的，仍是内联 onerror + 立即切断 + 可靠 fallback 图三件套。其他方案都是补位，不是替代。
最常被忽略的一点：空 src、CORS 阻塞、服务器返回 200 的兜底页，这三类情况 onerror 完全不触发。如果你发现“明明坏了却没换图”，先检查控制台是否出现 CORS 报错，或 network 面板里图片状态码是不是 200。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
