onerror死循环根本原因是备用图也加载失败，导致“换源→失败→再换源”无限触发；必须同时满足三条件：赋值后立即执行this.onerror=null、用dataset标记已处理、备用图用base64 SVG确保100%可达。
onerror死循环到底怎么触发的
根本原因就一个：备用图也加载失败，浏览器会再次触发 onerror，形成“换源→失败→再换源→再失败”的无限链路。内存占用飙升、标签页卡死甚至崩溃，不是夸张，是真实发生过的线上事故。
它不看你写了多优雅的 JS，只看最终 this.src 赋值后那个 URL 是否能返回 200 + 可解码图像。只要其中任意一环是 404、跨域被拦、或服务端返回了兜底 HTML 页面（比如 Nginx 的 404.html），onerror 就会再进一次。
必须同时满足的三个防循环条件
单靠 this.onerror = null 不够稳；光用 dataset 标记也不保险。真正闭环需要三者齐备：
-
this.onerror = null必须写在赋值语句之后、同一行，分号不能省——顺序错或漏写，等于没设 - 必须用
dataset或自定义属性（如data-tried）标记“已处理”，防止动态重渲染或框架 diff 后重复绑定事件 - 备用图地址本身要 100% 可靠：优先选
data:image/svg+xml;base64内联 SVG，其次用绝对路径（如/img/placeholder.svg），彻底避开相对路径解析、file:// 协议拦截、CDN 配置遗漏等问题
静态 HTML 和动态插入的写法差异
静态页面里直接写属性最简单，但动态创建的 <img> 容易掉坑：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 静态写法（推荐用于头像、图标等固定资源）：
<img src="logo.webp" onerror="if (!this.dataset.fallbacked) { this.dataset.fallbacked = '1'; this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror = null; }" alt="Logo"> - 动态插入时，
onerror必须在appendChild()前设置，否则首次错误已发生，事件监听器根本来不及注册 - Vue/React 等框架中，不能依赖模板里的
onerror属性——它们可能被编译成内联事件处理器，但 re-render 时会重置dataset，导致重复降级。应改用useEffect或mounted钩子中手动添加error事件监听，并加data-handled判断
为什么 base64 SVG 是最稳的 fallback
它绕过了所有外部依赖：不需要网络请求、不触发 CORS、不依赖服务端路由、不受 file:// 协议限制。哪怕整个站点离线打开，它也能立刻渲染出一个纯白或灰色占位框。
别用 PNG/JPEG 的 base64 ——体积大、解码慢、且旧版 Safari 对长 base64 支持不稳定。SVG 极简即可，例如：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==
这个 30×30 的白色方块，base64 编码后仅 132 字符，可直接硬编码进 HTML 或 JS 字符串。复杂点的图标，也建议用 <svg> 内联，而不是引用外部文件。
真正容易被忽略的点是：很多团队把 fallback 图放在 CDN，却忘了 CDN 域名本身可能不可达——这时候你防住了图片 404，却没防住 DNS 失败。base64 SVG 是唯一不依赖任何域名、协议、缓存策略的兜底手段。
