onerror换源无限触发的根源是备用地址404导致递归调用；必须立即设this.onerror=null切断链路，且需用绝对路径或内联SVG确保fallback可达。
onerror 换源后无限触发的根源是什么
根本原因不是代码写错了，而是备用地址本身也 404 —— 浏览器加载新 src 失败后，会再次触发 onerror，形成递归调用。内存持续增长，页面卡死甚至崩溃。这不是“偶尔失效”，而是只要 fallback 图不可达，就必然发生。
必须立即切断事件链：this.onerror = null 不是可选，是强制
可靠写法只有一种：onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"。注意两点：
- 分号不能省，否则第二条语句不执行
-
this.onerror=null必须紧接在this.src=...之后，顺序颠倒等于没写 - 绝对路径或
data:image/svg+xml;base64,...内联 SVG 是唯一能确保 fallback 可达的方式；相对路径、带查询参数的 URL（如logo.png?v=1）都可能失败
动态插入的 ![]()
怎么避免首次错误丢失
用 JS 创建 后再绑定
onerror，大概率来不及捕获首次加载失败——错误发生在 appendChild() 瞬间，事件监听还没挂上。正确做法是：
- 创建元素后、插入 DOM 前，立刻设置
img.onerror = handleImageError - 或统一用
document.addEventListener('error', ...)全局捕获，但需加instanceof HTMLImageElement判断和dataset.fallbacked标记防重复处理 - 不要依赖
src属性变化来判断是否已降级；要用dataset.loaded或dataset.retryCount显式记录状态
多级降级时怎么控制重试次数和兜底终点
原始 URL → CDN 备份 → 本地路径 → SVG 占位图，这个顺序本身没问题，但关键在「何时停」：
- 最多尝试 2 次换源（即原始 + 1 次 fallback），第 3 次直接设为透明图并移除
onerror - 每次换源前检查：
if (parseInt(img.dataset.retryCount) >= 2) { img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; img.onerror = null; return; } - 不要用
alt替代视觉降级——它只服务读屏器，对普通用户就是留白
真正容易被忽略的是：所有降级逻辑都建立在「fallback 资源本身必须 100% 可达」这一前提上。一旦用错路径、漏掉 this.onerror=null、或在动态场景下监听时机不对，整个链路就断在第一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
