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() 瞬间，事件监听还没挂上。正确做法是：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 创建元素后、插入 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、或在动态场景下监听时机不对，整个链路就断在第一环。