如何实现CSS图片加载失败的占位图_利用img:before模拟显示-css教程-PHP中文网

img标签不支持::before和::after伪元素，因其属于可替换元素，内容由外部资源决定，css规范禁止对其插入伪元素；替代方案是用div包裹img并结合onerror事件控制占位内容显示。

如何实现css图片加载失败的占位图_利用img:before模拟显示

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"> <li>在 CSS 中为容器设置默认背景（如灰色占位图：<code>background: url("placeholder.svg") center/cover #eee;）
利用 onerror 事件把 <img> 的 display 设为 none，让容器背景透出
同时移除 onerror 自身，防止重复触发（因为重设 src 可能再次失败）

示例代码：

<div class="img-container">
  @@##@@
</div>

CSS 配套：

CSS婚礼策划服务机构宣传网站模板

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;"> 替代 <code><img src="real.jpg" onerror="this.style.display='none'; this.onerror=null;">，再加 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 特性。