onerror卡死的根本原因是fallback图404触发无限循环，必须用this.onerror=null切断；绑定须在DOM插入前完成；fallback路径需绝对或base64以避免404；关键图禁用lazy加载。
onerror 为什么一写就卡死？
根本原因不是代码写错了，而是备用图也 404 —— 浏览器加载 fallback.png 失败后再次触发 onerror，形成无限循环。内存暴涨、标签页无响应、DevTools 卡死都是真实表现。
必须在替换 src 的同时立刻切断事件：this.onerror=null 是硬性要求，缺一不可。错误写法如 onerror="this.src='fallback.png'" 没有切断逻辑，99% 会出问题。
懒加载图片的 onerror 绑定时机错在哪？
动态插入的 IntersectionObserver 触发后创建）如果在 appendChild() 之后才绑定 onerror，首次加载失败已经发生，事件直接丢失。
实操要点：
- onerror 必须在元素插入 DOM 前赋值，例如
img.onerror = handler或内联写死onerror="..." - 若用全局监听，需加
capture: true并过滤：if (e.target.tagName === 'IMG' && !e.target.dataset.handled) - 绑定后立即打标：
e.target.dataset.handled = '1'，防止重复处理
为什么 fallback 图自己也加载失败？
80% 的“备用图失效”其实源于路径解析错误，不是图丢了。本地双击打开 HTML（file:// 协议）、相对路径嵌套（../）、大小写不一致（IMG.JPG vs img.jpg）都会让 fallback 路径 404。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
可靠方案：
- 所有 fallback 路径统一用绝对路径：
src="/assets/placeholder.svg"，而非./placeholder.svg - 开发阶段禁用双击打开，必须用 Live Server（如 VS Code 插件）起 HTTP 服务
- 终极兜底用 base64 SVG：
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="，彻底规避路径和跨域风险
懒加载 + onerror 的组合陷阱
关键图（如 banner、商品主图）加了 loading="lazy" 后又依赖 onerror 降级，等于把可用性押在 JS 加载完成上——JS 失败或网络中断时，用户看到的就是空白区域。
正确分层策略：
- 首屏关键图跳过懒加载：直接写死
src，不设loading="lazy"，也不用data-src - 非关键图若必须懒加载，
src应指向低质量但高可用资源（如 1px GIF 或 LQIP），data-src存高清地址 -
onerror只负责兜底网络失败，不解决 CORS、空src、服务端返回 200 占位图等场景 —— 这些得靠crossorigin、服务端配置分别应对
最常被忽略的点：onerror 不是“万能替补”，它只响应网络请求失败；而懒加载本身依赖 JS 执行，两者叠加会让失败路径变长、排查变难。路径是否绝对、fallback 是否 base64、绑定是否前置，这三个点漏掉任何一个，都可能让页面在弱网或异常环境下静默白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
