vue项目中,图片加载失败时的处理方案
在vue项目中,如果服务上没有这张图片,那么前端展示时就会出现渲染出错
图:
解决方案:
1.在img图片标签中绑定onerror事件
<div class="img-div" v-loading="partImageInfoState" element-loading-text="数据加载中...">
<img v-if="currentImagePart.imgUrl" :src="'/static/images/parts/'+currentImagePart.imgUrl" :onerror="errorImg">
<img v-else src="/static/images/part-default.png">
</div>
1.在data中增加对应的返回的替换地址
export default {
name: 'jy_table',
data () {
return {
errorImg: 'this.src="' + require('../../static/images/part-default.png') + '"', //加载图片报错时处理方法
}
},
}
版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/936.html
评论已关闭