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

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')
 }

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

推荐阅读