onerror常失效是因为fallback路径错误导致二次错误被浏览器阻止；必须写this.onerror=null并用绝对路径，推荐SVG占位图和alt文案，或改用CSS :has()、IntersectionObserver等更可靠方案。
img 的 onerror 为什么经常不生效
直接写 onerror="this.src='fallback.jpg'" 看似简单，但实际常失效——最常见原因是：图片路径本身带空格、特殊字符或相对路径解析失败，触发错误后又立即尝试加载 fallback.jpg，而该路径也不存在，导致无限循环或静默失败。浏览器会阻止第二次 onerror 触发（规范行为），所以占位图根本不会显示。
实操建议：
- 确保 fallback 图片路径是绝对路径或明确可访问的相对路径（比如以
/images/开头） - 在
onerror中先清除onerror自身，避免重复触发：onerror="this.onerror=null;this.src='/images/placeholder.png';" - 不要依赖内联事件处理；更可靠的方式是用 JS 统一绑定，便于调试和复用
用纯 HTML + 内联 onerror 的最小可行写法
如果必须用内联方式（如 CMS 或模板系统限制），按这个结构写才稳定：
<img src="broken-url.jpg"
onerror="this.onerror=null;this.src='/assets/placeholder.svg'"
alt="描述文字">
关键点：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
this.onerror=null是必须的，否则第二次错误不响应 - 占位图推荐用
.svg格式——体积小、无渲染失败风险、天然支持透明背景 -
alt属性不能省，它既是无障碍基础，也是视觉降级时的兜底文案
更健壮的替代方案：用 CSS background-image + :has() 检测（现代浏览器）
当项目支持 Safari 15.4+、Chrome 105+ 时，可以用 CSS 规避 JS 执行时机问题：
img { background: #eee url(/assets/placeholder.svg) no-repeat center / contain; }
img:has(:not([src])) { background-color: #f0f0f0; }
img[src]:not([src^="data:"]):not([src^="http"]):not([src^="/"]) { background-color: #e0e0e0; }
说明：
- 先设默认背景占位，再用
:has()检测是否加载失败（目前仅能靠缺失src或无效协议判断） - 它不依赖 JS，也不触发网络请求，适合静态站点或 SEO 敏感场景
- 注意：无法识别 404 图片，只对空
src或非法协议有效；真正失败仍需 JS 补充
真正在意兼容性？用 loading="lazy" + IntersectionObserver 做延迟 fallback
对老浏览器（IE、旧 Android Webview）或需要精确控制 fallback 时机的场景，放弃 onerror，改用观察器监听加载状态：
const img = document.querySelector('img[data-fallback]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !img.complete) {
img.addEventListener('error', () => {
img.src = img.dataset.fallback;
});
img.src = img.src; // 强制重载触发 error
}
});
}, { threshold: 0 });
observer.observe(img);
使用前提：
- 给 img 加
data-fallback="/path/to/placeholder.png" - 确保图片已插入 DOM 且未被提前加载（配合
loading="lazy"更稳妥） - 注意
img.complete在缓存命中时为 true，要结合isIntersecting判断是否真需要 fallback
onerror，而是确认 fallback 路径在所有上下文里都存在、且不会引发二次错误。很多线上故障，都是占位图自己也 404 了。 
