在前端页面开发过程中，网络异常、图片路径错误等问题都可能导致图片加载失败，默认情况下浏览器会显示破损的图片图标，影响页面整体美观。我们可以通过CSS的before伪元素为加载失败的图片添加自定义占位内容，实现友好的提示效果。
实现核心原理
当图片加载失败时，浏览器会给img元素添加一个特殊的错误状态，此时我们可以通过CSS的属性选择器匹配到加载失败的图片，再结合before伪元素在图片位置插入自定义的占位内容和样式。需要注意的是，before伪元素默认是行内元素，需要手动设置宽高和定位才能覆盖在图片原本的位置上。
具体实现步骤
1. 基础HTML结构
首先准备普通的img标签，这里故意写一个错误的图片路径来模拟加载失败的场景：
<!-- 错误路径模拟图片加载失败 --> <img src="wrong_path/image.jpg" alt="示例图片" class="img-with-fallback"> <!-- 正常路径的图片不会触发占位效果 --> <img src="https://picsum.photos/200/300?random=2" alt="正常图片" class="img-with-fallback">
2. 编写CSS样式
通过img[src][alt]:invalid选择器匹配加载失败的图片，然后设置before伪元素的样式：
/* 基础图片样式 */
.img-with-fallback {
width: 200px;
height: 300px;
display: block;
border: 1px solid #eee;
/* 为伪元素定位做准备 */
position: relative;
}
/* 匹配加载失败的图片 */
img[src][alt]:invalid {
/* 隐藏原本的破损图标 */
visibility: hidden;
}
/* 为加载失败的图片添加before占位内容 */
img[src][alt]:invalid::before {
/* 显示伪元素内容 */
visibility: visible;
/* 转为块级元素，设置宽高 */
display: block;
width: 100%;
height: 100%;
/* 定位覆盖原图片位置 */
position: absolute;
top: 0;
left: 0;
/* 占位内容样式 */
content: "图片加载失败";
background-color: #f5f5f5;
color: #999;
font-size: 14px;
/* 内容居中 */
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
3. 效果验证
运行上述代码后，路径错误的img元素会显示灰色的占位区域，内部展示"图片加载失败"的提示文字，而路径正确的图片会正常显示，不会受到影响。
注意事项
:invalid选择器的兼容性在主流现代浏览器中表现良好，如果需要兼容非常老旧的浏览器版本，可以添加对应的前缀或者备用方案。- 如果图片本身设置了
display: none样式，before伪元素也不会显示，需要确保图片本身是可见状态。 - content属性中除了文字，也可以添加简单的图标字符，比如
content: "⚠ 图片加载失败"，但注意不要使用过于复杂的样式，避免伪元素渲染异常。 - 如果页面中需要不同的图片加载失败提示，可以给img添加不同的类名，编写多套对应的CSS规则即可。
扩展方案
如果需要更灵活的提示内容，也可以结合JavaScript监听img的error事件，动态修改元素的类名或者属性，再配合CSS的before伪元素实现更复杂的占位效果，比如添加重新加载按钮等：
// 监听所有图片的加载失败事件
document.querySelectorAll('img').forEach(img => {
img.addEventListener('error', function() {
// 为加载失败的图片添加自定义属性
this.setAttribute('data-load-failed', 'true');
});
});
对应的CSS可以修改为匹配img[data-load-failed]选择器，实现和之前相同的占位效果，这种方式可以兼容更多浏览器场景。