onerror死循环主因是fallback图路径也404，触发无限递归；必须赋值+切断：this.src='fallback.svg';this.onerror=null；动态插入需插入前绑定或全局监听；空src、CORS阻塞、200兜底页等场景onerror不触发。
onerror死循环为什么一写就卡死
根本原因是备用图路径也 404，浏览器加载 fallback.png 失败后再次触发 onerror，形成无限递归。内存暴涨、标签页无响应甚至 DevTools 崩溃都是真实发生过的现象。它不是“代码没生效”，而是 fallback 图本身不可达——80% 的问题卡在这一步。
必须写的两行：赋值 + 切断
任何只写 this.src = 'fallback.png' 的写法都危险。防死循环不是可选项，是硬性操作：
-
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"—— 绝对路径或 base64 更可靠 - 更稳妥的写法：
onerror="if (!this.src.includes('fallback')) { this.src='/fallback.svg'; this.onerror=null; }"，避免重复降级 - 推荐用内联 SVG base64 占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底规避路径风险
动态插入的 <img> 怎么绑定才不丢事件
如果先 appendChild() 再绑定 onerror，首次错误已发生，事件监听直接失效。正确做法只有两种：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在插入 DOM 前手动赋值：
img.onerror = () => { img.src = 'fallback.jpg'; img.onerror = null; }; - 改用全局监听：
document.addEventListener('error', e => { if (e.target instanceof HTMLImageElement && !e.target.dataset.fallbacked) { e.target.src = 'data:image/svg+xml;base64,...'; e.target.dataset.fallbacked = 'true'; } }); - 注意：全局监听需加捕获阶段（第三个参数设为
true），否则部分浏览器无法捕获
哪些情况 onerror 根本不会触发
很多人反复检查代码却找不到问题，是因为压根没进到 onerror 逻辑。它只响应“请求发出后失败”，以下场景完全沉默：
立即学习“前端免费学习笔记（深入）”；
-
src是空字符串、undefined或纯空格 —— 浏览器不发请求 - CORS 阻塞（如外链图床未配
crossorigin）—— 控制台报错但onerror不触发 - 服务器返回 200 状态码的兜底页（比如某些 CDN 对 404 自动返回占位图）—— 浏览器认为“成功”
- 图片文件头正常但数据损坏（如截断 JPEG）—— 行为不统一，部分浏览器不触发
真正要盯住的，永远是 src 路径本身是否拼对、是否在目标环境（本地开发 / CDN / file://）下真实可访问。其他所有优化，都建立在这个基础上。
