onerror不触发或卡死页面最常见原因是备用图404导致无限循环，必须写成onerror="this.src='/fallback.svg'; this.onerror=null;"并用绝对路径或base64确保可达，动态插入需提前绑定或全局捕获监听。
onerror属性为什么经常不触发或卡死页面
最常见原因是备用图路径本身也 404，导致第二次加载失败后浏览器静默阻止后续 onerror 触发——不是代码没写对，而是 fallback 图根本不可达。此时页面可能卡顿、内存飙升，甚至标签页无响应。
必须在赋值新 src 的同时立刻切断事件绑定：this.onerror=null 是硬性要求，缺一不可。
- 错误写法：
onerror="this.src='default.png'"→ 备用图再失败就无限循环 - 正确写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" - 路径必须是绝对路径或已验证可访问的相对路径（如
/images/开头），避免因 base URL 解析错乱导致二次 404 - 推荐用
.svg格式占位图：体积小、无渲染失败风险、天然透明背景
动态插入的 img 元素怎么安全绑定 onerror
通过 document.createElement('img') 创建后直接 appendChild，再补 onerror 绑定，大概率来不及——错误已在插入 DOM 后瞬间触发，事件丢失。
稳妥做法是在插入前就完成绑定：
- JS 创建时立即赋值：
img.onerror = () => { img.src = '/fallback.svg'; img.onerror = null; }; - 或使用捕获阶段全局监听：
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,...'; } }, true); -
true参数确保捕获阶段命中，覆盖所有后续动态插入的<img> - 用
dataset.handled防重复替换，避免多次触发同一张图
onerror 无法覆盖的几种真实失败场景
onerror 只响应网络层错误（HTTP 状态码非 2xx），对以下情况完全静默：
-
src为空字符串、纯空格或undefined→ 浏览器根本不发请求，无错误事件 - CORS 被拦截（跨域图片未设
crossorigin）→ 控制台报错但onerror不触发 - 服务器返回 200 状态码的兜底图（如某些 CDN 的“图片不存在”占位页）→ 浏览器视为加载成功
- JPEG 文件头正常但数据块损坏 →
img.naturalWidth === 0可检测，但需额外轮询或load后校验
这些情况必须靠其他手段兜底，比如预加载默认图、用 IntersectionObserver 延迟加载前先占位、或服务端统一返回带语义的占位响应。
纯 CSS 方案能替代 onerror 吗
不能。CSS 的 background-image 是叠加而非条件切换——background-image: url(broken.jpg), url(placeholder.png) 会同时发起两个请求，且第一张失败不会自动切到第二张。
它只适合装饰性场景：
- 无语义：屏幕阅读器读不到，
alt文本失效 - 不支持懒加载（
loading="lazy"）、srcset、object-fit等原生能力 - 无法区分“加载中”和“加载失败”，纯视觉降级
- 现代方案可试
:has()（Chrome 105+/Safari 15.4+）：img:has(:not([src]))检测空src，但依然无法捕获 404
真正要兼顾语义、可访问性、懒加载和错误反馈，onerror + 可靠 fallback 路径仍是不可绕过的基线方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
