onerror无限循环的根源是fallback图也404，必须写成this.src='/path'; this.onerror=null;且顺序不可颠倒，推荐用base64内联SVG彻底规避路径风险。
onerror 无限循环的根源是 fallback 图也 404
浏览器加载 src 失败（如 404、500、超时）时触发 onerror，但如果你在事件里只写 this.src = 'fallback.png'，而这个 fallback 路径本身又不可访问，它会再次触发 onerror——形成递归。现代浏览器通常会在第二次就静默丢弃事件，但内存已开始暴涨，标签页可能卡死或崩溃。
这不是“偶尔发生”，而是只要 fallback 资源部署失败、路径拼错、CDN 缓存未刷新，就必然复现。
- 绝对不要用相对路径如
./img/placeholder.jpg，容易因当前 URL 上下文变化失效 - 避免带查询参数的 fallback 地址，如
/placeholder.svg?v=2，v 参数可能被 CDN 或网关剥离导致 404 - 不推荐用
data:前缀以外的协议外地址（如file://），本地开发时看似可行，上线即断
必须写成 this.src='...'; this.onerror=null; 且顺序不能颠倒
this.onerror=null 不是锦上添花，是阻断循环的唯一有效手段。它必须紧接在 this.src=... 赋值之后，中间不能有换行、注释或条件判断。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
onerror="this.src='fallback.svg'; if (this.src) this.onerror=null;"
这段代码在某些浏览器中会因解析时机问题漏掉阻断；更糟的是：
onerror="this.onerror=null; this.src='fallback.svg';"
顺序反了——事件处理器还没执行完赋值，this.onerror 就已被清空，后续 fallback 加载失败时无 handler 可调用，依然可能卡死。
正确写法只有一种：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"
注意：分号不能省；路径用绝对路径或 base64；this.onerror=null 必须是同一语句的第二部分。
比内联 onerror 更稳的 fallback 方案
内联 onerror 看似简单，但无法覆盖动态插入的 <img alt="HTML嵌入onerror无限循环怎么修？阻断无限循环应对技巧" >、服务端渲染首屏缺失 JS 的场景，也不利于统一维护 fallback 行为。
推荐组合策略：
- 首屏静态图仍用内联
onerror，但 fallback 统一指向一个内联 SVG：data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底规避路径风险 - 所有 JS 动态创建的
<img alt="HTML嵌入onerror无限循环怎么修？阻断无限循环应对技巧" >，必须在appendChild()前手动绑定onerror，或使用全局捕获：document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.fallbacked) { e.target.dataset.fallbacked = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true) -
<picture></picture>中的<img alt="HTML嵌入onerror无限循环怎么修？阻断无限循环应对技巧" >兜底 src 也必须满足上述要求——它不是“可选”，而是最终防线，不能是空值、相对路径或依赖后端重写的地址
哪些情况 onerror 根本不会触发，别白忙活
onerror 只响应“请求发出后网络层失败”，对以下常见场景完全沉默：
-
src为空字符串、undefined、纯空格或javascript:void(0)—— 浏览器压根不发请求 - CORS 阻塞（跨域图片没加
crossorigin属性）—— 控制台报错，但onerror不进 - 服务器返回 200 状态码的兜底页（如某些 CDN 把 404 自动重定向到 /404.html）—— 浏览器认为“加载成功”
- 图片文件头正常但内容损坏（如 JPEG 数据块 CRC 错）—— 此时
naturalWidth === 0，需额外 JS 检测
这意味着：仅靠 onerror 无法覆盖全部异常路径，必须配合 <picture></picture> 格式降级、服务端确保首屏 src 可达、以及 alt 文案语义化，三者缺一不可。
