根本原因是备用图地址也404导致无限循环；必须写成onerror="this.src='fallback'; this.onerror=null;"，且fallback推荐用base64内联SVG彻底规避路径风险。
onerror 为什么一设就崩溃
根本原因不是代码写错了，而是备用图地址也 404 —— 浏览器加载 fallback.png 失败后，再次触发同一个 onerror，形成无限循环。内存持续上涨，DevTools 可能卡死，标签页无响应。
这不是小概率事件：本地开发时相对路径错位、CDN 配置遗漏、服务端返回 200 状态码的兜底 HTML 页（如 Cloudflare 的 502 页面），都会让备用图“看似存在实则无效”。
- 必须在替换
src的**同一行语句中**执行this.onerror = null - 分号不能省：
onerror="this.src='/img/placeholder.svg'; this.onerror=null;" - 顺序不能颠倒：先赋值
src，再切断事件，否则新请求还没发出去，事件就被移除了
动态创建的 img 怎么安全重置 onerror
用 document.createElement('img') 创建后，再补 onerror 绑定，大概率来不及——DOM 插入瞬间就已触发错误，事件直接丢失。
稳妥做法只有两种：
- 创建后、插入前立即赋值：
img.onerror = () => { img.src = 'data:image/svg+xml;base64,PHN2Zy...'; img.onerror = null; }; - 全局捕获（推荐）：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true);，true表示捕获阶段，能命中所有后续插入的
怎么避免 fallback 图自己再失败
90% 的“降级失败”，其实源于 fallback 图本身不可达：相对路径解析错乱、file:// 协议拦截、CDN 域名未备案等。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
最彻底的解法是绕过路径解析：
- 用内联 base64 SVG 占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg== - 所有路径统一用绝对路径：
/img/logo.png，而非./img/logo.png或../assets/logo.png - 开发阶段禁用双击打开 HTML，必须用 Live Server（如 VS Code 的 Ritwick Dey 插件）起 HTTP 服务
onerror 重置后还有哪些情况不触发
onerror 是个“窄口径”钩子：它只响应网络层失败（HTTP 状态码非 2xx），对以下真实失败场景完全静默：
-
src为空字符串、undefined或纯空格 → 浏览器根本不发请求 - CORS 阻塞（跨域图片没加
crossorigin属性）→ 控制台报错，但onerror不进 - 服务器返回 200 状态码的兜底页（如 Nginx 配了
error_page 404 /missing.html）→ 浏览器认为“加载成功” - 图片文件头正常但数据损坏（naturalWidth === 0）→ 需额外 JS 检测，
onerror无法覆盖
这些边界情况没法靠重置 onerror 解决，得靠 alt 文字兜底来分层防御。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
