如何用 JavaScript 检查图像 URL？

Question

所以我正在尝试检查图像 URL 是否有效，其中它必须 return 一个 true 或 false 值。问题是我无法弄清楚如何实现这一目标。我正在使用 ionic 4.0，这是我已经拥有的：

imageExists(url, callback) {
   const img = new Image();
   img.onload = function () { callback(true); };
   img.onerror = function () { callback(false); };
   if(callback === true ) {
     return true;
    } else {
      return false;
    }
}

  const imageUrl = 'https://www.google.com/images/srpr/nav_logo14.png';
  let bool = this.imageExists(imageUrl, function (exists) {
    console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
    console.log(exists);
    bool = exists;
  });


console.log(bool);

Answer 1

你很接近，但你需要设置 img.src = url 来启动它尝试加载 :) 另外，删除 if (callback === true) 的检查，因为那没有意义；回调是一个函数，而不是布尔值。布尔值作为 onload / onerror 处理程序中的参数传递给函数。

Answer 2

您可以使用一些正则表达式来实现这一点。

function validURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
    '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locator
  return !!pattern.test(str);
}

来源：Check if a JavaScript string is a URL

Answer 3

好吧，您实际上可以通过测试图像是否解析为某种东西来做到这一点

    function imageResolves(image_url){

    var request = new XMLHttpRequest();
    try {
      request.open('HEAD', image_url, false);
      request.send();
    } catch(error){
      return false;
    }
     return request.status === 200;

}

或使用与您建议的选项类似的选项：

function imageExists(imageSrc) {

    return new Promise(function(resolve,reject){
      var img = new Image();
      img.src = imageSrc;
      img.onload = resolve;
      img.onerror = reject;
        })
}

然后要使用它，您需要做类似的事情

imageExists('https://www.google.com/images/srpr/nav_logo14.png').then(function(){
//It exists
},function(){
//It does not exist
})

这是一个包含两种实现的 jsFiddle https://jsfiddle.net/sudakatux/s19oL5zg/7/

注意第一个选项可能会导致 CORS 问题，具体取决于 headers

Answer 4

通过获取图像本身来检查怎么样，一个有效的 url 实际上不是一个真实的图像，你可以这样做，也许通过这样做

const contentTypePart = "image";
const isImage = (url) => new Promise((resolve, reject) => {
  // check that is a valid url
  // then if valid url
  fetch(url).then((response) => {
    if (response.ok) {
      const currentContentType = response.headers.get('Content-Type');
      // check if the content type is actually an image extension
      if (currentContentType.indexOf(contentTypePart) > -1) {
        return resolve(url);
      }
    }
    reject(false);
  }).catch(reject)
})

或者如果您更喜欢使用图像构造函数

const contentTypePart = "image";
const isImage = (url) => new Promise((resolve, reject) => {
  // check that is a valid url
  // then if valid url
  const image = new Image();
  image.src = url;
  image.onload = resolve;
  image.onerror = reject;
});

最后的使用方法是

isImage('https://www.google.com/').then(console.log.bind(null, 'is a valid image')).catch(console.error.bind(null, 'is not a valid image'))

上面的代码将抛出一个 console.error 因为 url 是一个网站而不是图像。

通过这样做，您可以检查 url 实际上是真实有效的图像。

如何用 JavaScript 检查图像 URL？

How can I check a image URL with JavaScript?

javascript

ionic4