img 元素永远不匹配 :empty，因其为替换元素且始终存在于 dom；可靠方案是 onerror 添加 broken 类，配合 img.broken::after 伪元素显示占位符，并注意 object-fit 下的定位错位问题。
图片加载失败时 img 元素本身不触发 :empty
很多人以为给 img 加 :empty::before 能显示占位符，其实不行——img 是替换元素，永远非空，哪怕没加载出图，DOM 里也存在，:empty 完全不匹配。
真正能用的只有 img::after 或 img::before，但前提是开启伪元素渲染条件：
-
img必须设置position: relative（否则伪元素定位失效） - 必须显式声明
content: ""，否则伪元素不渲染 - 需要
display: block或inline-block才能设宽高
用 img::after + onerror JS 配合最可靠
纯 CSS 无法感知是否加载失败，所以得靠 JS 触发一个 class，再由 CSS 控制伪元素显隐。这是目前兼容性最好、行为最可控的方式。
常见错误是直接在 onerror 里改 src 到占位图，结果可能造成二次失败或循环请求。
- 推荐做法：
onerror="this.classList.add('broken')" - CSS 中写
img.broken::after渲染文字或图标占位符 - 避免在
onerror里操作src或outerHTML，容易引发重绘异常
img.broken {
position: relative;
display: inline-block;
}
img.broken::after {
content: "⚠";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 14px;
}
object-fit 和伪元素布局容易错位
当 img 设置了 object-fit: cover 或 contain，图片内容缩放后，伪元素仍按原始盒模型定位，常导致占位符偏出可视区。
- 解决方案：把伪元素套在父容器上，而不是
img自身 - 父容器设
position: relative，img设position: absolute覆盖其上 - 这样伪元素始终相对于容器定位，不受
object-fit影响
慎用 background-image 替代 img 做占位
有人为省事直接用 div + background-image，靠 background-image: url(...) no-repeat 加 fallback 颜色。但问题不少：
- 无法被屏幕阅读器识别，语义丢失
- 打印样式中背景图默认不出现（需额外加
@media print { background: ... }） -
background-image加载失败不会触发任何事件，无法降级到文字提示 - 响应式场景下，
background-size和object-fit行为逻辑不一致，调试成本更高
除非明确只要视觉占位、不要语义和可访问性，否则别绕开 img 标签本身。
真正难的不是写几行 CSS，而是让失败状态既可见、又可达、还不干扰正常流——这些细节一旦漏掉，用户看到的就是一片空白或错位符号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
