onerror导致页面卡死是因为备用图也404，触发无限递归调用；可靠写法是onerror="this.src='/img/placeholder.svg';this.onerror=null;"，且必须用绝对路径或SVG base64。
onerror="this.src='fallback.png'"为什么直接卡死
这不是语法错误，是逻辑闭环缺失：备用图 fallback.png 本身也 404，浏览器会再次触发同一 onerror 回调，反复赋值 → 再失败 → 再触发。主线程被拖住，内存飙升，页面无响应，但控制台往往不报错。
常见诱因包括：
- 路径写成相对路径（如
./fallback.png），实际解析后变成 404 - CDN 地址失效或权限变更，导致备用图无法加载
- 误把
alt当作兜底，它只显示文字，不参与加载流程
内联 onerror 的唯一可靠写法
必须在赋值新 src 后**立刻切断事件链**，顺序、分号、this. 缺一不可：
onerror="this.src='/img/placeholder.svg'; this.onerror=null;"
立即学习“前端免费学习笔记（深入）”；
关键点：
-
this.onerror=null必须紧接在this.src=...之后，中间不能换行、不能加条件判断、不能调用函数 - 路径必须是绝对路径（以
/开头）或data:image/svg+xml;base64,...，避免因 base URL 解析错乱二次失败 - 推荐用内联 SVG base64，例如：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAi...，彻底绕过网络请求环节
动态创建的 img 怎么安全绑定 error 事件
拼字符串写 onerror="..." 在 JS 动态插入时基本失效——this 指向 window，且框架（如 Vue 的 v-html）或 innerHTML 注入时根本不会绑定内联事件。
正确做法是用 addEventListener('error', handler)，且必须满足三个条件：
- 绑定时机：在设置
img.src**之前**，否则首次加载失败已错过 - 处理逻辑：先清空
e.target.src = ''，再赋新值，否则浏览器可能读缓存的 404 响应，不发新请求 - 清理动作：成功替换后立即执行
e.target.removeEventListener('error', handler)，否则后续复用或重绘可能意外触发
示例：
function imgErrorHandler(e) {
const img = e.target;
img.src = '';
img.src = 'data:image/svg+xml;base64,...';
img.removeEventListener('error', imgErrorHandler);
}
const img = document.createElement('img');
img.addEventListener('error', imgErrorHandler);
img.src = 'user-avatar.jpg';
container.appendChild(img);
全局监听或重试逻辑容易踩的坑
document.addEventListener('error') 对图片错误基本无效——该事件不冒泡，且跨域图片的 e.target 可能为 null，无法精准替换 src。
如果真需要重试（比如 CDN 备份 → 本地 → SVG），注意：
- 不要按“总次数”计数，要按 URL 路径粒度统计，用
new URL(img.src, location.href).pathname标准化 - 最多尝试 2 次，第 3 次直接设 base64 SVG 并移除监听器，避免陷入更隐蔽的循环
- 禁止在
onerror回调里调用img.setAttribute('onerror', ...)，这是无效的 DOM 属性更新，不会重新注册事件
最易被忽略的一点：所有 fallback 图都必须是**零依赖资源**——不能是另一个可能 404 的远程 PNG，也不能是需服务器返回正确 MIME 类型的文件；SVG base64 是目前唯一能同时满足可达性、跨域安全、无缓存风险的方案。
