图片加载失败时用::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 避免换行错位。
