img标签不支持::before和::after伪元素，因其属于可替换元素，内容由外部资源决定，CSS规范禁止对其插入伪元素；替代方案是用div包裹img并结合onerror事件控制占位内容显示。
img:before 无法直接作用于 img 元素
浏览器明确禁止对 <img> 这类替换元素（replaced element）使用 ::before 或 ::after 伪元素。即使写了 img::before { content: "⚠"; }，CSS 会静默忽略——它根本不会渲染，也不会触发任何错误提示。
这是规范行为，不是 bug，也不是兼容性问题。所有现代浏览器（Chrome、Firefox、Safari、Edge）都严格遵守。
替代方案：用容器包裹 img 并监听 onerror
真正可行的做法是放弃伪元素思路，改用 HTML 结构 + JavaScript 错误捕获。核心逻辑是：当 <img> 加载失败时，隐藏原图，显示备用内容（如占位图、文字或背景色）。
- 给
<img>外层套一个<div class="img-container"> - 在 CSS 中为容器设置默认背景（如灰色占位图：
background: url("placeholder.svg") center/cover #eee;） - 利用
onerror事件把<img>的display设为none，让容器背景透出 - 同时移除
onerror自身，防止重复触发（因为重设src可能再次失败）
示例代码：
立即学习“前端免费学习笔记（深入）”；
<div class="img-container"> <img src="real.jpg" onerror="this.style.display='none'; this.onerror=null;"> </div>
CSS 配套：
.img-container {
width: 200px;
height: 150px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'%3E%3Crect width='100%' height='100%' fill='%23eee'/%3E%3Ctext x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='14' fill='%23999'%3Eimage failed%3C/text%3E%3C/svg%3E") center/cover;
}
为什么不用 object-fit + background-image 模拟 img？
有人尝试用 <div style="background-image: url(...); background-size: cover;"> 替代 <img>，再加 onerror 绑定到父容器——但问题在于：CSS background-image 不触发 DOM 事件，onerror 无处可绑。
可行的变通是用 Image() 构造函数预加载：
const img = new Image();
img.src = "real.jpg";
img.onload = () => container.style.backgroundImage = `url("${img.src}")`;
img.onerror = () => container.style.backgroundImage = `url("placeholder.svg")`;
但这增加了异步复杂度，且无法自动响应 src 动态变更，也不支持原生 <img> 的语义化和 SEO 特性。
服务端或构建时 fallback 更可靠
如果项目可控（如 Next.js、Vue SFC、Webpack），优先考虑编译期处理：
- 使用
<picture>+<source>提供多种格式，最后用<img>作兜底 - Webpack 中通过
url-loader或file-loader将小图转 base64，避免 404 - 服务端 Nginx / CDN 配置
try_files或error_page 404重定向到占位图
这些方式不依赖 JS 执行，无 FOUC，且对爬虫友好。而前端 JS fallback 是最后一道防线，不是首选方案。
真正难处理的是动态 src（比如用户上传后拼接的 URL）、CDN 缓存失效、跨域图片等场景——这时候 onerror + 容器背景是最轻量且确定生效的解法。
