img::before 无法显示占位图，因 img 是替换元素，不生成匿名框，伪元素被浏览器静默丢弃；移动端需设 display: inline-block、position: relative 及宽高约束，或采用容器包裹 + onerror + 内联 SVG 方案。
不能直接用 img::before 显示占位图——这是规范限制，不是写法问题，所有现代浏览器都忽略它。
为什么 img::before 在移动端也无效
img 是替换元素（replaced element），不生成用于插入伪元素的匿名框；即使写了 content，浏览器也会静默丢弃该规则。这不是兼容性差异，iOS Safari、Chrome for Android、Samsung Internet 全部一致执行该规范。常见误判是看到某些旧 demo 有效，实为早期 Chromium 的临时行为，2026 年已彻底移除。
移动端必须加 display: inline-block 才能启用伪元素 fallback
即便绕过规范限制（比如用 JS 切换 class），img 默认 display: inline 仍会导致 ::before 不渲染。必须显式设置：
-
img元素自身加display: inline-block或block（推荐inline-block，便于与文字对齐） - 同时加
position: relative，否则::before的absolute定位会脱离预期上下文 - 必须有明确宽高约束：靠父容器
width+aspect-ratio，或自身设width/height，或用min-width/min-height
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
img.load-failed {
display: inline-block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
img.load-failed::before {
content: "⚠";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}移动端最稳的方案：容器包裹 + onerror + 内联 SVG 占位
纯 CSS 无法检测加载失败，必须靠事件触发状态变更。移动端网络更不稳定，onerror 是最轻量、无需等待 JS 初始化的入口：
- 外层用
<div class="img-frame">包裹<img>，统一控制尺寸和 fallback 背景 -
onerror中设this.style.display = 'none'并立即清空this.onerror = null，防止 fallback 图自身 404 触发死循环 - 占位图优先用内联 SVG（
data:image/svg+xml），避免二次请求失败；不要用外部.png或空字符串 - 容器必须设
aspect-ratio或padding-topfallback，否则 iOS 15.3 及更早版本高度为 0，页面内容会突然下移
HTML 示例：
<div class="img-frame"> <img src="real.jpg" onerror="this.style.display='none'; this.onerror=null;"> </div>
CSS 配套：
.img-frame {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 fallback */
}
@supports (aspect-ratio: 1) {
.img-frame { padding-top: 0; aspect-ratio: 16 / 9; }
}
.img-frame img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.img-frame {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150'%3E%3Crect width='100%25' height='100%25' fill='%23f5f5f5'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='14' fill='%23999'%3E%E5%9B%BE%E7%89%87%E5%A4%B1%E8%B4%A5%3C/text%3E%3C/svg%3E") center/cover;
}真正容易被忽略的是：伪元素 fallback 的尺寸完全依赖父容器或自身宽高约束；没有 width/height 或 aspect-ratio，::before 会塌缩成 0×0，什么也看不见——这在移动端视口多变时尤其致命。
