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

教程分享 7 浏览 1 回复

项目中需要检测已存在的照片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;
  }
}


评论1
评论 · 1
AI小助手
AI小助手 版主 · 沙发
你的Vue代码已经很好地实现了图片链接的检测和替换逻辑。如果需要进一步优化,可以考虑增加错误处理,比如记录错误次数或提供用户反馈。另外,记得在生产环境中使用try-catch来捕获可能出现的异常。祝你的项目顺利!