onerror无限报错的根本原因是备用图路径404导致死循环；必须立即置空onerror并确保fallback路径真实有效，否则仍会二次失败。
onerror 为什么一写就无限报错甚至卡死页面
根本原因不是代码写错了，而是备用图路径本身也 404 —— 浏览器加载 fallback.jpg 失败后再次触发 onerror，形成死循环。内存持续增长，标签页可能无响应，DevTools Network 面板里会看到同一张 fallback 图反复发请求并标红。
它不依赖浏览器版本，IE9+、Chrome、Firefox、Safari 全部复现。静默失败（不报错但也不显示占位图）往往是因为第二次 onerror 被浏览器规范强制阻止，不是你漏写了逻辑。
-
this.onerror = null必须紧接在this.src = '...'后执行，顺序不能颠倒，分号不能省 - 仅靠
this.onerror = null不够稳：若备用图地址含变量或拼接错误（如this.src = '/img/' + name + '.png'），仍可能二次失败 - 推荐用
data-fallbacked或dataset.loaded打标，双重保险
可靠防循环的 onerror 写法（静态 & 动态场景）
静态 HTML 中最简可行写法：
<img src="icon.webp" onerror="this.onerror=null; this.src='/assets/placeholder.svg'" alt="菜单图标">
动态创建时，必须在插入 DOM 前绑定，否则首次错误已发生，事件监听不到：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- JS 创建时立即赋值：
img.onerror = () => { img.src = 'data:image/svg+xml;base64,...'; img.onerror = null; }; - 全局捕获更稳妥（尤其 React/Vue 等框架）：
document.addEventListener('error', e => { if (e.target instanceof HTMLImageElement && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true); - 绝对不用相对路径：
./fallback.png或../img/missing.jpg在路由嵌套或构建后极易解析错，统一用/assets/开头
哪些情况 onerror 根本不会触发，别白费劲
onerror 只响应「请求发出后返回非 2xx 状态码」，以下真实失败场景它完全静默：
-
src为空字符串、undefined或纯空格 → 浏览器根本不发请求 - CORS 被拦截（控制台报
Blocked by CORS policy）→onerror会触发，但换源无效，因跨域限制仍在 - 服务器返回 200 状态码的兜底页（如 CDN 的
/img/404.png?text=Not+Found）→ 浏览器视为“加载成功” - JPEG 文件头正常但数据块损坏 →
img.naturalWidth === 0可检测，但需额外轮询或load后判断
这些情况必须靠其他手段补救：预加载默认图、服务端统一返回带语义的占位响应、或用 IntersectionObserver 主动校验加载状态。
比 onerror 更稳的 fallback 方案（现代项目推荐）
真正健壮的图片降级不是靠一个属性兜底，而是分层控制：
-
<picture></picture>+<source type="image/avif"></source>解决格式兼容问题，但末尾的<img src="/fallback.jpg" alt="HTML图片加载onerror循环报错怎么办？拦截无限循环排查教程" >必须真实可用，否则照样白屏 - CSS
:has()检测（Chrome 105+/Safari 15.4+）：img { background: #eee url(/assets/placeholder.svg) no-repeat center / contain; } img:has(:not([src])) { background-color: #f0f0f0; }，不发请求、不依赖 JS - 关键图跳过懒加载：
loading="lazy"对首屏 banner、logo 有害无益，直接写死src并确保该路径服务端可命中
复杂点在于：不同失败原因需要不同应对策略，而开发者常误以为写个 onerror 就万事大吉。实际要同时盯住路径解析、CORS 配置、服务端响应状态、以及浏览器对 file:// 协议的拦截行为——其中任意一环出错，onerror 都只是表面补丁。
