判断后端返回的图片地址是否可用,不可用就显示默认的图片

 <img :src="!state?defaultimg:url" alt="" />
data(){
  return{
    defaultimg: require("@/assets/images/headimg.png"),
    url:'https://aliyun.com/',
    state:false,
  }
},
methods:{
  CheckImgExists(imgurl) {
    return new Promise(function(resolve, reject) {
      var ImgObj = new Image(); //判断图片是否存在
      ImgObj.src = imgurl;
      ImgObj.onload = function(res) {
        resolve(res);
      }
      ImgObj.onerror = function(err) {
        reject(err)
      }
    })
  }
},
mounted(){
  this.CheckImgExists(this.url).then(()=>{
     this.state=true
  })
}

  

posted @ 2021-07-27 15:05  chicidol  阅读(320)  评论(0)    收藏  举报