不能。img是替换元素且默认display: inline，::before在inline替换元素上不生效；需显式设display: inline-block或block，并配合position: relative与::before的absolute定位才能渲染占位图。
图片加载失败时img元素还能触发::before吗？
不能。一旦img加载失败，浏览器仍会渲染该元素，但::before伪元素默认不渲染——因为img是替换元素（replaced element），且默认display: inline，而::before在inline替换元素上**不生效**。
必须显式设置display: inline-block或block，才能让::before可渲染。这是最容易卡住的第一步。
-
img需加display: inline-block（推荐）或display: block - 不能依赖父容器的
display来“透传”；必须直接设在img上 - 若用
vertical-align: middle对齐文字，inline-block比block更友好
如何用::before叠加一层背景占位图？
核心思路：把占位图作为::before的background-image，用content: ""激活伪元素，并通过position: absolute覆盖在img上。注意img本身需设position: relative作为定位上下文。
img {
display: inline-block;
position: relative;
}
img::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #eee url("/placeholder.svg") center/contain no-repeat;
z-index: 1;
}
-
z-index: 1确保占位图盖在失败的img内容之上（失败时img通常只显示alt文字或空白） -
background-size: contain比cover更安全，避免裁剪 - 慎用
background: url(...) no-repeat简写——它会重置background-color，导致占位图底色丢失
为什么onerror内联处理比纯CSS更可靠？
CSS无法感知“加载失败”这个事件，::before始终存在，无论图片是否成功加载。也就是说：占位图会永远叠在图片上面，遮挡正常图片。
真正实用的做法是「CSS兜底 + JS主动控制」：先用::before定义占位样式，再用onerror移除它，让正常图片透出来。
- 给
img加class="has-placeholder"，CSS只对这个类生效 -
onerror="this.classList.remove('has-placeholder')"在失败时不执行，占位图保留；成功时移除类，占位图消失 - 如果项目用现代框架（React/Vue），优先在组件层监听
onError事件并切换状态，而非操作DOM类名
SVG占位图路径404会导致二次失败吗？
会。如果::before里引用的/placeholder.svg本身加载失败，浏览器不会报错，但背景将变成纯色（如#eee），且无任何fallback机制。
这不是CSS能解决的问题，得靠资源部署保障：
- 把占位图放在CDN或静态资源目录下，确保HTTP 200返回
- 避免用相对路径如
./placeholder.svg，容易因组件嵌套路径变化而404 - 可内联base64 SVG（适合小图标）：
background-image: url("data:image/svg+xml;base64,...")，彻底规避请求失败
真正的难点不在写法，而在确认失败场景是否被完整覆盖：网络中断、跨域拒绝、路径拼错、MIME类型错误——这些都会让img进入失败态，但只有onerror能统一捕获。CSS伪元素只是视觉补丁，不是加载逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
