后端返回的图片资源可能会因为各种原因(后台误删,地址更改未及时更新,损毁)出现无法展示的情况,比如这种报错
就会导致图片资源错误,页面出现这种情况
用户体验很不好,为了改善这种情况,可以在资源加载的时候加个监听,如果图片加载失败就显示默认图片,如图:
其实就是给图片标签加个错误监听事件
<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");},
以上即可实现图片报错时展示默认图片