css图片不存在显示error（常用的两种解决方法）

css图片不存在显示error当图片无法加载时，可以通过CSS来显示一张错误提示图片或者自定义的替代文本。下面提供两种常用的解决方法：

1. 使用CSS的`background-image`属性设置图片的背景：

.error-image {
background-image: url('path/to/error-image.jpg');
background-size: cover;
width: 200px;   /* 设置宽度 */
height: 200px;  /* 设置高度 */
}

在HTML中，将该类应用于要显示图片的元素：

<div ></div>

这样，在图片无法加载时，会显示`path/to/error-image.jpg`作为背景图像。

2. 使用CSS的`content`属性和伪元素`::before`或`::after`来插入自定义的替代文本：

.error-text {

position: relative;
width: 200px;   /* 设置宽度 */
height: 200px;  /* 设置高度 */
}
.error-text::before {
content: '图片加载失败';
position: absolute;
top: 50%;      /* 垂直居中 */
left: 50%;     /* 水平居中 */
transform: translate(-50%, -50%);
}

在HTML中，将该类应用于要显示图片的元素：

<div ></div>

当图片无法加载时，会在元素内部显示文本内容"图片加载失败"。

以上两种方法都可以根据实际需求进行样式的自定义。如果希望在图片加载失败时提供更多样式和交互，可以结合JavaScript来实现。