vue项目中，图片加载失败时的处理方案

李维亮

发布于 2021-07-08 10:14:51

1.3K0

发布于 2021-07-08 10:14:51

文章被收录于专栏：李维亮的博客

在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') + '"', //加载图片报错时处理方法
   }
  },
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-01-22，如有侵权请联系 cloudcommunity@tencent.com 删除

图片标签