后端返回图片资源错误404，前端使用默认图片

后端返回的图片资源可能会因为各种原因（后台误删，地址更改未及时更新，损毁）出现无法展示的情况，比如这种报错

就会导致图片资源错误，页面出现这种情况

 

用户体验很不好，为了改善这种情况，可以在资源加载的时候加个监听，如果图片加载失败就显示默认图片，如图：

 

其实就是给图片标签加个错误监听事件

<div class="cam_per" v-for="(item,index) in camList" :key="index">
         <img class="imgs" :src="'http://smarteyes.dcyu.com/prod-api'+item.image" @error="onErrorImg"></img>
          
</div>

 onerror监听图片加载失败

onErrorImg(event) {
      event.target.src = require("@/assets/404_images/default_img.png");
    },

 以上即可实现图片报错时展示默认图片