onerror无限循环的直接原因是备用图也加载失败且未执行this.onerror=null，导致错误反复触发、内存持续增长直至卡死。
onerror无限循环的直接原因是什么
浏览器对 onerror 的触发有隐式限制：一旦备用图（fallback）也加载失败，第二次 onerror 可能被静默丢弃，但首次仍会执行——而如果没手动切断，它就会尝试第三次、第四次……内存持续增长，标签页卡死甚至崩溃。这不是代码写错了，是事件链没断。
关键点只有两个：
-
this.onerror = null必须出现在赋值新src的同一行内 - 备用图路径必须绝对可靠，不能是相对路径、未部署路径或带空格/编码错误的 URL
最简可靠的内联写法怎么写
CMS、邮件模板或静态 HTML 场景下必须用内联 onerror 时，只接受这一种写法：
<img src="https://cdn.example.com/photo.jpg" onerror="this.onerror=null;this.src='/assets/placeholder.svg'" alt="内容描述">
注意这几点：
立即学习“前端免费学习笔记（深入）”；
-
this.onerror=null要写在this.src=...前面或后面都行，但必须在同一语句中，用分号隔开 - 占位图推荐用
data:image/svg+xml;base64,...或以/开头的绝对路径，避免因 base URL 导致二次 404 - 不要用
./fallback.png或images/fallback.jpg这类相对路径，它们在不同路由下极易解析失败
动态插入图片时 onerror 绑定时机很关键
document.createElement('img') 创建后，必须在插入 DOM 之前 就绑定 onerror，否则图片可能在绑定完成前就已触发错误，导致事件丢失。
const img = document.createElement('img');
img.src = 'https://api.example.com/avatar?id=123';
img.onerror = function() {
this.src = '/assets/placeholder.svg';
this.onerror = null;
};
document.body.appendChild(img); // 插入前已完成绑定常见错误：
- 先
appendChild再img.onerror = ...→ 很可能来不及 - 使用
addEventListener('error', ...)但没加useCapture: true→ 某些浏览器不捕获冒泡前的错误
全局监听 error 事件更稳妥吗
对大量动态图片（如列表、瀑布流），全局监听确实比每个 img 写内联更可控：
document.addEventListener('error', e => {
if (e.target.tagName === 'IMG' && !e.target.dataset.handled) {
e.target.dataset.handled = '1';
e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2UwZTBlMCIvPjwvc3ZnPg==';
}
}, true);这个方案绕过了内联语法限制，但要注意：
-
useCapture: true是必须的，否则部分浏览器不触发 -
dataset.handled用来防重复处理，不是靠onerror = null - 它无法区分“真实 404”和“CORS 阻塞”或“空 src”，这些情况根本不会进该事件
真正容易被忽略的是：onerror 不是万能钩子，它只响应网络请求失败；而 CORS 错误、空字符串、200 状态兜底页，都会让它彻底沉默——这时候你得靠 fetch() 预检或服务端埋点来补位。
