js前端图片加载异常兜底方案

针对JS前端图片加载异常兜底方案，以下是完整攻略：

1. 使用onerror事件

当图片加载出现异常时，浏览器会触发<img>标签的onerror事件。我们可以利用这个事件进行图片加载异常处理。

<img src="./image.png" onerror="this.src='./default.png'">

在这个例子中，如果src属性的图片加载失败，则会自动替换成default.png。

2. 使用JS的Image对象

我们也可以使用JS的Image对象来检查图片是否成功加载。当图片加载失败时，onerror方法会自动被调用，同样可以使用这个方法来处理异常情况。

const img = new Image();
img.onload = function() {
  console.log("图片加载成功");
}
img.onerror = function() {
  console.log("图片加载失败");
  // do something
}
img.src = "image.png";

在这个例子中，当image.png加载失败时，会进入onerror回调函数进行处理。

3. 使用第三方库

针对复杂的项目，我们也可以使用第三方库来处理图片加载异常。例如，我们可以使用imgOnload库，它可以在加载图片时处理图片异常情况，并提供了多种事件回调接口。

import imgOnload from 'img-onload';

imgOnload('.my-img', {
  error: () => {
    console.log('图片加载失败');
    // do something
  }
});

在这个例子中， imgOnload会检查.my-img是否加载成功，如果加载失败，会触发error回调函数进行处理。

以上就是JS前端图片加载异常兜底方案的完整攻略，希望对您有所帮助。