onerror内联写法必须加防重逻辑并清空onerror，否则备用资源再404会静默失败；推荐用绝对路径+SVG占位图+data属性防重，或全局捕获+base64内联兜底。
onerror 内联写法为什么总不生效
直接写 onerror="this.src='placeholder.png'" 几乎必然失效——不是 JS 有问题，而是 fallback 路径本身又 404 了。浏览器检测到第二次加载失败，会静默阻止再次触发 onerror（规范行为），结果就是空白或裂图一直挂着。
必须加防重逻辑：onerror="this.onerror=null;this.src='/assets/placeholder.svg'"。其中 this.onerror=null 是硬性要求，否则一旦备用图路径错，页面可能卡顿甚至崩溃。
常见踩坑点：
-
./placeholder.png这类相对路径在路由跳转或嵌套路由下极易解析失败，优先用以/开头的绝对路径 - 推荐用
.svg占位图：体积小、无渲染失败风险、天然透明背景，且不会因 MIME 类型被拦截 -
alt属性不能省，它不是视觉 fallback，但缺失会导致无障碍断层，也影响 SEO
动态插入的图片怎么统一 fallback
用 document.addEventListener('error', ...) 捕获比遍历绑定更可靠，尤其对 Vue/React 中异步插入或列表渲染的 <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,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2UwZTBlMCIvPjx0ZXh0IHg9IjEwMCIgeT0iMTAwIiBmb250LXNpemU9IjE0IiBmaWxsPSIjYzBjNGNjIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj5pbmdyZXNzPC90ZXh0Pjwvc3ZnPg==';
}
}, true);
说明：
- 第三个参数
true表示捕获阶段监听，能命中所有<img>（包括后续appendChild插入的） -
dataset.handled防止重复替换，避免多次错误反复触发 - 用 base64 内联 SVG 作为兜底，彻底绕过路径问题和跨域限制
响应式场景下如何避免占位图拉伸变形
响应式图片常配合 srcset 和 sizes 使用，但 fallback 图若没控制好宽高比，会在不同视口下严重拉伸或裁切。
正确做法是放弃直接改 src，改用 CSS 容器占位 + 真实图片覆盖：
.img-container {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #f5f5f5 url(/assets/placeholder.svg) center/contain no-repeat;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
优势：
-
aspect-ratio确保容器始终有稳定盒模型，避免文字上推重排 - 真实图片加载成功后自然覆盖背景，失败时背景自动显现
- 无需 JS 干预，兼容 SSR 和静态站点生成器（如 Hugo、Jekyll）
注意：object-fit: cover 只对真实 <img> 生效，fallback 背景图靠 background-size: contain 控制缩放，二者行为独立，不会冲突。
CSS :has() 方案在什么情况下能用
img:has(:not([src])) 或 img:not([src]) 这类选择器，只能识别「空 src」或「非法协议」（如 src="abc"），对真实 404、CORS 阻止、服务器返回兜底图等场景完全无效。
它适合的场景很窄：
- 纯静态 HTML 页面，且你可控所有
src值（比如 CMS 模板中某些字段为空） - 需要零 JS 的轻量方案，且只处理明显非法输入（如未渲染完就插入的空
src） - 目标浏览器明确支持 Safari 15.4+ / Chrome 105+ / Firefox 119+
真正要应对网络层失败，:has() 必须和 JS fallback 组合使用——CSS 做首屏视觉兜底，JS 做精准状态修正。别把它当成 onerror 的替代品。
