不能在 <img> 上用 ::before 显示可靠占位图，因为它是替换元素，浏览器根本不支持伪元素渲染；所有声称有效的写法在现代主流浏览器中均无效，开发者工具会标记为 invalid。
直接说结论：不能在 <img> 上用 ::before 显示可靠占位图，因为它是替换元素，浏览器根本不支持伪元素渲染。 所有声称“img::before 可以显示失败提示”的写法，在现代 Chrome/Firefox/Safari/Edge 中都无效——开发者工具里会标为 invalid，样式压根不生效。
为什么 img::before 在绝大多数情况下不工作
<img> 是 CSS 规范定义的“替换元素”（replaced element），其内容区域由浏览器内部机制控制，不生成用于插入 ::before 的匿名框。这不是兼容性问题，而是规范行为。
- 即使写了
position: relative和width/height，::before也不会渲染 - 旧版 Chrome 曾短暂支持，但早已移除；当前所有主流引擎均明确不支持
- 检查 DevTools 的 Styles 面板，能看到该规则被标记为 “invalid” 或直接不列出
真正能用 ::before 的方案：改用容器包裹
把视觉占位逻辑交给父容器，<img> 只负责语义和内容层叠。这是唯一能稳定使用 ::before 的路径：
- 用
<div class="img-wrap"><img src="..."></div>结构 -
.img-wrap设position: relative、显式宽高（或aspect-ratio） -
.img-wrap::before控制占位文案、图标、背景色 - JS 监听
img.error后给.img-wrap加error类，触发伪元素显示
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
`.img-wrap {
position: relative;
width: 300px;
height: 200px;
background-color: #f5f5f5;
}
.img-wrap.error::before {
content: "⚠ " attr(data-alt);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
pointer-events: none;
}`
onerror 必须加 this.onerror = null
内联 onerror="this.src='...'" 看似简单，但极易引发死循环：如果 fallback 图片也 404，会再次触发 onerror，最终卡住或报错。
- 正确写法：
onerror="this.onerror=null; this.src='/placeholder.svg'" - 优先用 SVG 占位图（体积小、缩放无损），确保路径部署稳定，不依赖构建哈希
- 若用 JS 统一监听，记得补充
img.complete && !img.naturalWidth判断缓存失败场景
容易被忽略的细节：object-fit 和可访问性
当 <img> 设置了 object-fit: cover 或 contain，它的内容缩放后，伪元素仍按原始盒模型定位——导致占位文字偏出可视区。必须把伪元素挂到容器上，而非 <img> 自身。
- 用
<div>包裹是唯一能兼顾object-fit+::before+ 可访问性的做法 - 直接用
background-image替代<img>会丢失alt、不被屏幕阅读器识别、打印时不显示 - 伪元素默认不继承字体，
font-family、line-height必须显式设置，否则文字换行错位
