检测图片URL是否失效Vue判断替换默认图

颜诗雅

版主

社区管理 ⚔青铜 镖丁 ☯化神

教程分享 112 浏览 1 回复

详情摘要

【总结】帖子介绍了如何用Vue检测图片URL是否有效，无效时替换为默认图片的方法。通过创建一个Promise，利用Image对象来检查URL，有效则返回1，无效则返回2，并在异步函数中根据结果决定是否替换图片。

项目中需要检测已存在的照片url是否能正常访问，如果可以就直接显示，不可以就替换一张默认图片。Vue代码如下：

// 校验图片链接是否有效
checkImg(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); }
  }).then(() => {
    console.log('有效链接');
    return '1';
  }).catch(() => {
    console.log('无效链接');
    return '2';
  });
},
async isHeadUrl(){
  let type = await this.checkImg(this.headUrl);
  if(!this.headUrl || type == '2'){
    this.headUrl = this.photoImg;
  }
}

教程