Vue检测图片URL是否失效

Vue检测图片URL是否失效

   一 基于Image对象

       基于Image对象的 onload 和 onerror 方法实现。

/**
 * @param { string } url 图片链接
 * @return { Promise<boolean>} 是否有效 true 有效 false失效
 * */
function checkImage(url) {
  return new Promise((resolve) => {
    let img = new Image();
    img.onload = function() {
      console.log('图片存在');
      resolve(true);
    };
    img.onerror = function() {
      console.log('图片失效');
      resolve(function ())
    };
    img.src = url;
  })
}

   二 基于featch

       通过HTTP请求来判断图片的状态码。

function checkImage(url) {
  return new Promise(resolve => {
    fetch(url, { method: 'HEAD' })
      .then(response => {
        if (response.ok) {
          console.log('图片存在');
          resolve(true);
        } else {
          resolve(false);
          console.log('图片失效');
        }
      })
      .catch(() => {
        resolve(false);
        console.log('图片失效');
      });
  })
}