onerror无限循环的根源是fallback图404导致递归触发；必须写成this.src='...'; this.onerror=null;且分号不可省，推荐用base64 svg data url彻底规避路径风险。
onerror 无限循环的根源是 fallback 图也 404
浏览器加载 src 失败后触发 onerror，如果备用图地址（比如 '/fallback.png'）本身不可访问，会再次触发 onerror，形成递归调用。这不是 JS 语法错误，而是资源链路断裂——内存持续增长，标签页可能卡死或崩溃。
关键点在于：onerror 不会自动阻止第二次失败；它只管“请求发出去后没回来”，不管 fallback 是否靠谱。
- 绝对不能写成
onerror="this.src='fallback.png'"（缺this.onerror=null） - 相对路径如
'./img/default.svg'在路由嵌套时极易解析错，变成 404 - 本地开发时
'default.png'没加./前缀，上线后因 base URL 变化直接失效
必须写成 this.onerror=null 才算真正切断
this.onerror=null 不是锦上添花，是防止死循环的硬性操作。它必须和 this.src=... 写在同一句内联表达式中，且顺序不能颠倒——先赋新值，再清事件。
- 正确写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" - 分号不能省，否则 JS 解析中断，整个表达式失效
- 如果 fallback 图需动态拼接，务必提前校验路径有效性，或改用 base64
- Vue/React 中避免用响应式变量直接赋值
src，否则可能绕过this.onerror=null的 DOM 层控制
推荐用 base64 SVG 占位图彻底规避路径风险
data URL 是唯一不依赖服务器路径、CORS 或网络状态的 fallback 方案。内联 SVG 体积小、渲染稳定、透明背景天然适配各种容器。
- 示例：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;" - 生成方式：用任意 30×30 的纯色 SVG 转 base64，可压缩到 150 字符以内
- 不适用于需要高保真占位（如 LQIP）的场景，但对头像、图标、按钮等通用 fallback 已足够
- 服务端渲染 HTML 时，直接写死该 data URL，确保首屏零请求依赖
动态插入的 img 元素 onerror 绑定必须在 appendChild 前完成
通过 document.createElement('img') 创建后，若先 appendChild() 再绑定 onerror，很可能图片已在插入瞬间触发加载并失败，事件监听器还没挂上就错过了。
- 安全做法：创建后立即赋值
img.onerror = () => { img.src = 'data:...'; 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:...'; } }, true) - 注意
true参数——不加则无法在捕获阶段命中，部分浏览器下完全不生效 - 用
dataset.handled防重复处理，避免同一张图被多次替换
onerror 根本不覆盖空 src、CORS 阻塞、200 状态兜底页这三类常见失败。它们看起来都是“图片没显示”，但机制完全不同——你得先确认到底是哪一类，再决定要不要动 onerror。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
