当图片加载失败时，如何用默认图片进行替换？- 前端开发技巧

7 min read

可以通过以下几种方式来实现在img中的src加载失败时用默认图片来替换：

  1. 使用onerror属性

可以在img标签上使用onerror属性，在图片加载失败时通过该属性触发一个JavaScript函数，然后在函数中将src属性设置为默认图片的URL。

示例代码：

<img src="url-to-image.jpg" onerror="this.onerror=null;this.src='default-image.jpg';">

这里this.onerror=null 的作用是防止出现死循环加载失败。

  1. 使用JavaScript

可以使用JavaScript来检查图片加载状态，如果加载失败则将src属性设置为默认图片的URL。

示例代码：

<img id="myImage" src="url-to-image.jpg">

<script>
var image = document.getElementById("myImage");
image.onerror = function() {
    image.src = "default-image.jpg";
};
</script>
  1. 使用CSS

可以使用CSS的background-image属性来实现在图片加载失败时用默认图片来替换。

示例代码：

<div class="image" style="background-image: url(url-to-image.jpg)"></div>

.image {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(default-image.jpg);
}

.image img {
    display: none;
}

如果图片加载失败，可以隐藏img标签，然后在CSS中将默认图片作为背景图片显示出来。