CSS无法直接检测图片加载失败，但可通过onerror事件动态添加class（如load-failed）并用CSS定义降级样式；属性选择器仅适用于初始src为空的静态兜底，无法响应加载失败状态。
当图片加载失败时，CSS 本身无法直接检测“加载失败”这一状态（这是浏览器的 DOM 行为，非 CSS 可监听），但可以通过 属性选择器 + HTML 属性配合 实现样式降级控制——最常用且可靠的方式是利用 onerror 事件动态添加 class，再用 CSS 针对该 class 设置备用样式。
✅ 利用 onerror 添加失败标记 class（推荐）
这是目前兼容性好、逻辑清晰、无需 JS 框架的主流做法：
- 在
<img>标签中添加内联onerror，将自身 class 修改为含error的状态（如img-error） - 用 CSS 属性选择器或类选择器定义该状态下的样式（隐藏原图、显示占位、加边框、写文字等）
示例代码：
<img src="broken.jpg"
onerror="this.classList.add('load-failed'); this.onerror=null;"
alt="描述文字">
CSS 中这样写：
立即学习“前端免费学习笔记（深入）”；
.load-failed {
display: inline-block;
width: 200px;
height: 150px;
background: #f5f5f5;
border: 1px dashed #ccc;
color: #999;
font-size: 12px;
line-height: 150px;
text-align: center;
}
.load-failed::after {
content: "图片加载失败";
}
? 用 [src] 属性选择器做静态兜底（有限场景）
CSS 的属性选择器（如 img[src=""] 或 img:not([src])）只能匹配 HTML 中**初始就为空或缺失 src 的标签**，无法响应加载失败后的 DOM 状态变化。因此它只适用于：
- 服务端渲染时已知某些图片地址为空，提前留空
src - 组件初始化阶段统一处理默认占位，不依赖真实加载结果
例如：
img[src=""], img:not([src]) {
background: #eee;
border: 1px solid #ddd;
}
img[src=""]::before {
content: "无图";
color: #999;
}
? 注意：CSS 无法监听 naturalWidth === 0 或网络错误
有些文章提到用 img:not([src*="http"]) 或伪类模拟失败状态，这些都属于误用——CSS 没有运行时判断能力，也不能读取 JavaScript 中的 naturalWidth 或 complete 属性。所有“纯 CSS 检测加载失败”的方案本质上都不成立。
? 进阶建议：结合 loading="lazy" 和 IntersectionObserver 更友好
对懒加载图片，可配合 JS 监听 load / error 事件，在失败时插入 SVG 占位或 fallback 文字，同时移除 loading 动画样式，提升用户体验。
