CSS无法监听图片加载失败，但可通过属性选择器匹配src为空或缺失的img元素实现样式兜底，如img[src=""], img:not([src])；真实404等错误需JS onerror处理。
图片加载失败时，CSS 本身无法直接监听 <img alt="css图片加载失败时样式如何处理_通过属性选择器匹配src为空状态" > 是否加载失败（这是 JavaScript 的职责），但可以通过一些技巧配合 HTML 属性和 CSS 属性选择器，实现对“疑似失败”或“可预判失败”状态的样式兜底——比如利用 src 属性为空、非法、或被显式置空的情况。
用属性选择器匹配 src 为空或缺失
当 <img alt="css图片加载失败时样式如何处理_通过属性选择器匹配src为空状态" > 标签的 src 属性未设置、值为空字符串或仅含空白符时，可通过 CSS 属性选择器进行匹配并应用降级样式：
-
img[src=""]：匹配src=""（空字符串） -
img:not([src])：匹配完全不带src属性的<img alt="css图片加载失败时样式如何处理_通过属性选择器匹配src为空状态" > -
img[src~=""]不适用（~="用于空格分隔的单词匹配，不适用于空值）
示例：
<img src="" alt="占位图"> <img alt="无src属性">
CSS：
立即学习“前端免费学习笔记（深入）”；
img[src=""], img:not([src]) {
display: inline-block;
width: 48px;
height: 48px;
background-color: #f0f0f0;
border: 1px dashed #ccc;
font-size: 0;
}
img[src=""]::after,
img:not([src])::after {
content: "⚠";
font-size: 16px;
color: #999;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
结合 data-src 或自定义属性做更可控的 fallback
实际项目中常使用懒加载或服务端渲染，图片真实地址存在 data-src 中，而 src 初始为空。此时可统一用 src="" 触发样式，并在 JS 加载成功后移除该状态：
- 初始 HTML：
<img src="" alt="描述"> - CSS 匹配
img[src=""]显示占位态 - JS 加载成功后：
img.src = img.dataset.src; img.removeAttribute('src');（或设为真实路径），样式自动退出
注意：无法用纯 CSS 检测 404 或网络失败
浏览器加载失败（如 404、跨域拒绝、路径错误）不会改变 src 属性值，也不会触发任何 CSS 伪类（如 :invalid 对 <img alt="css图片加载失败时样式如何处理_通过属性选择器匹配src为空状态" > 无效）。这类场景必须依赖 JavaScript 的 onerror 事件：
<img src="broken.jpg" onerror="this.classList.add('load-failed')" alt="css图片加载失败时样式如何处理_通过属性选择器匹配src为空状态" >
再配合 CSS：
img.load-failed {
background: linear-gradient(45deg, #eee, #f5f5f5);
color: #999;
}
img.load-failed::before {
content: "?️ 加载失败";
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
小技巧：用 object-fit + 背景色提升视觉容错
即使图片加载成功，尺寸异常也影响体验。建议统一设置：
img {
object-fit: cover;
object-position: center;
background-color: #fafafa;
}
这样在图片为空、极小或比例严重失调时，也能保持容器结构稳定，避免布局抖动。
