CSS图片加载失败提示与before占位实现

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS图片加载失败提示及before占位实现》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

图片加载失败时用::before显示占位内容，核心是JS监听load/error事件更新data-loaded属性，CSS据此控制伪元素展示alt文本及样式。

图片加载失败时，用 ::before 伪元素显示占位内容，核心思路是：利用 img 元素的 alt 文本或自定义属性，在图片未加载成功时，通过 CSS 检测并展示替代内容。但需注意：CSS 本身无法直接判断图片是否加载失败，所以必须借助 JavaScript 触发状态变更，再配合 ::before 渲染提示。

1. 基础 HTML 结构 + 自定义 data 属性

给 img 标签添加一个标识加载状态的属性（如 data-loaded="false"），初始设为 false；同时保留 alt 内容作为提示文案来源：

<img src="broken.jpg" alt="封面图" data-loaded="false">

2. CSS 控制 ::before 占位显示

当 data-loaded="false" 时，让 img 相对定位，并用 ::before 绘制灰色背景、居中文字和可选图标：

img[data-loaded="false"] {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 120px;
}

img[data-loaded="false"]::before {
  content: attr(alt);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f5f5;
  color: #999;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

这样，只要属性没变，就会一直显示 alt 文本作为占位提示。

3. JS 监听加载与错误，更新状态

监听 load 和 error 事件，成功则设为 data-loaded="true"，失败保持 false（或显式设为 error）：

document.querySelectorAll('img').forEach(img => {
  img.addEventListener('load', () => {
    img.dataset.loaded = 'true';
  });
  img.addEventListener('error', () => {
    img.dataset.loaded = 'false'; // 确保失败态生效
  });
});

注意：若图片已缓存且立即加载完成，可能在 JS 执行前就触发了 load，建议在 DOM 加载后尽早初始化，或使用 img.complete 补充判断。

4. 进阶：支持图标 + 更友好提示

可在 ::before 中用 Unicode 图标或内联 SVG 增强提示效果：

• 用 content: "⚠ " attr(alt); 添加警告符号
• 或改用 background-image 叠加小图标（需 base64 或 CDN 地址）
• 加过渡动画：对 opacity 或 transform 做简单淡入/缩放，提升体验

不复杂但容易忽略细节：伪元素默认不继承字体，记得显式设置 font-family 和 line-height 避免换行错位。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~