Vue请求网络图片或者接口图片为空、错误时，使用默认图片

VUE项目使用axios请求百度线上图片时，报403错误

1.jpeg

这样状态的图片不处理，那么页面就会显得很难看，不太友好， 所以想到的解决方案是：
1.如果图片请求为空或者请求发生了错误，是不是可以使用默认图片替代了错误图片呢？
这个方案当然是可行，那么开始解决吧…
1.1 首先我们需要知道，我们图片发生了错误了，我们怎么知道错误，然后触发错误事件，进行对错误图片的处理呢？
很好，VUE为我们提供了@error。

<img :src="item.backgrounImg" @error="defaultBackImg">

只需要在方法区写@error对应的方法来处理错误图片即可

defaultBackImg() {
        if(event.type == "error") {
          event.target.src= require("../assets/imgs/backg.jpg")
        }
      },

Vue的点击@click事件也是默认吧浏览器的event事件当做第一参数传入的，所以我们使用event事件来加载默认事件就可以了。
这样我们的图片就能正常显示了，错误的图片被本地默认图片覆盖了