img::before默认不显示占位图，因img是inline替换元素，css禁止在其上渲染伪元素；需设display:inline-block/block及position:relative，再用::before绝对定位叠加占位图，它仅作视觉兜底，须与onerror互补使用。
直接设 img 的 ::before 无法生效，必须改 display 并配 position 定位；纯 CSS 无法“检测”失败，只能做视觉兜底——它和 onerror 是互补关系，不是替代关系。
为什么 img::before 默认不显示占位图
因为 img 是替换元素（replaced element），且默认 display: inline，而 CSS 规范明确禁止在 inline 替换元素上渲染伪元素。浏览器会直接忽略 ::before，哪怕你写了 content: "" 和背景样式。
- 必须显式设置
img的display: inline-block或display: block，不能靠父容器“继承”或“影响” - 若需文字对齐（比如和文字同行），
inline-block比block更友好，配合vertical-align: middle即可 -
position: relative要加在img上，否则::before的absolute会相对于最近的定位祖先，容易错位
如何用 ::before 叠加一层纯 CSS 占位图
核心是把占位图当背景塞进伪元素，再用绝对定位盖在图片上。它不会“感知”加载是否失败，但只要图片没出来、尺寸还在，它就一直可见——适合做静态兜底。
-
img必须有明确宽高（或由父容器约束），否则::before无法铺满 -
::before要写content: ""（空字符串也行，但不能省略），否则伪元素不创建 - 推荐用
background-image: url('placeholder.svg')，体积小、缩放无损；避免用 base64 写死在 CSS 里，不利于缓存和复用 - 示例关键样式：
.my-img {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
}
.my-img::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f0f0f0 url('/img/placeholder.svg') center/contain no-repeat;
}
为什么不能只靠 object-fit 解决加载失败问题
object-fit 只控制已加载图片的裁剪/拉伸行为，对“没图”的状态完全无感。它既不会触发 fallback，也不会让伪元素出现，更不会改变 onerror 的行为。
-
object-fit: cover或contain在图片加载成功后才起作用，加载失败时img元素仍存在，只是内容为空 - 若想让占位图也适配相同裁剪逻辑，得在
::before的background-size上手动模拟，比如用cover对应background-size: cover - 常见误用：
img { object-fit: cover; }+::before但没设img宽高 → 占位图尺寸塌陷，显示异常
和 onerror 配合使用的实际建议
纯 CSS 占位图适合兜底，但无法解决“fallback 图也挂了”的循环问题，必须靠 JS 控制流程。
- 在
onerror回调里第一时间执行this.onerror = null，防止二次触发 - 不要直接写
onerror="this.src='...'"，尤其在构建工具环境下：哈希路径会让内联字符串失效，应提前把 fallback URL 存为变量或从配置读取 - React/Vue 等框架中，优先用事件处理器函数（如
onError={({ currentTarget }) => {...}}），避免响应式更新干扰 DOM 属性赋值 - 真正健壮的做法：用
onerror切换容器 class（如img-wrap--failed），再由 CSS 控制.img-wrap--failed::before显示占位，解耦逻辑与样式
最容易被忽略的是：伪元素占位图依赖 img 元素的渲染存在，而 onerror 后手动设 src 若指向一个 404 地址，浏览器仍会尝试加载——此时 img 尺寸还在，但内容空白，::before 依然可见；可利用这点做“两层 fallback”：CSS 占位图保底 + JS 监控兜底逻辑，而不是指望某一种方式独挑大梁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
