用户头像地址无效时显示默认图片--图片检验

1、地址有效时,会显示出来正确的图片

2、自动识别出地址无效时会触发 @error方法检验图片并改为默认地址

<div class="photo">
     <img :src="imgUrl" @error="imgError(imgUrl)" alt="" />
</div>

data() {
    return {
      loadingAvatar,
      errorimg: require('../imgs/avatar.png'),
      month: '',
      imgUrl: 'this.$store.state.mReport.userInfo.headPictureUrl' // 测试当地址错误时
   
imgUrl: this.$store.state.mReport.userInfo.headPictureUrl // 正确取值
    }
  },

imgError(item) {
    console.log('imgUrlimgUrlimgUrlimgUrlimgUrl', item)
    this.imgUrl = require('../imgs/avatar.png')
 }

 

posted @ 2020-12-02 17:14  萌萌鱼~  阅读(265)  评论(0编辑  收藏  举报