CSS图片加载失败用伪元素占位图

本文介绍了如何通过CSS伪元素::before配合少量JavaScript实现图片加载失败时优雅显示占位提示的实用方案：由于纯CSS无法监听图片加载状态，必须借助onerror事件为失败的img元素添加特定class（如load-failed），再由CSS基于该状态控制伪元素内容（如自定义文字、图标或背景）、隐藏原图，并强调了关键细节——img需设置position: relative及明确宽高、优先使用visibility: hidden而非opacity: 0以保障可访问性，还提供了通过data-error-text属性动态注入提示文案的进阶技巧，兼顾简洁性、可维护性与用户体验。

图片加载失败时，用 ::before 伪元素显示本地占位提示是可行的，但要注意：伪元素无法直接替换或接管 的加载失败行为，它只是在 img 元素上“盖一层”，不能响应 onerror 或替代 src 失效逻辑。真正可靠的做法是结合 HTML + CSS + 少量 JS，而 ::before 可作为视觉增强手段——比如在加载失败后显示文字提示或默认图标。

✅ 正确思路：img 自身处理失败 + ::before 辅助展示

单纯靠 CSS 无法监听图片是否加载失败（浏览器不触发伪元素重绘），所以必须借助 onerror 属性或 JS 监听，把失败状态“标记”出来（比如加 class），再让 ::before 基于该 class 显示占位内容。

• 给 添加 onerror="this.classList.add('load-failed')"
• 用 CSS 定义：img.load-failed::before 显示提示文字或图标
• 同时隐藏原图（img.load-failed { visibility: hidden; } 或 opacity: 0）

? 示例代码（纯前端，无构建工具）

CSS 部分：

img {
  display: inline-block;
  position: relative;
}
img.load-failed {
  visibility: hidden;
}
img.load-failed::before {
  content: "⚠ 图片加载失败";
  display: block;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #999;
  font-size: 14px;
  line-height: 160px;
  text-align: center;
  border: 1px dashed #ddd;
}

⚠ 注意：::before 要生效，img 必须设 position: relative（否则伪元素定位可能错乱），且需有宽高（可通过父容器、min-width/min-height 或 aspect-ratio 控制）。

? 进阶技巧：用 data-* 属性统一管理提示文案

避免硬编码提示文字，提升可维护性：

CSS 中用 attr() 动态读取：

img.load-failed::before {
  content: attr(data-error-text);
  /* 其他样式同上 */
}

✅ 支持中文、emoji、空格；注意 attr() 在伪元素中仅支持字符串值，不执行 JS 表达式。

? 常见误区提醒

• 不要只靠 ::before + :not([src]) 或类似纯 CSS 判断 —— 浏览器不会因 src 404 重绘伪元素
• img 默认是 inline 元素，::before 在 inline 元素上表现受限 —— 务必设 display: block/inline-block 和 position: relative
• 避免用 opacity: 0 隐藏失败图片 —— 仍占布局、可聚焦、影响可访问性；推荐 visibility: hidden 或 width: 0; height: 0（配合 overflow: hidden）

基本上就这些。核心是：CSS 伪元素负责“画”，JS（哪怕一行 onerror）负责“通知”。两者配合，轻量又可控。

今天关于《CSS图片加载失败用伪元素占位图》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！