如何使用 JavaScript 检查图像 URL？

Question

所以我试图检查图像 URL 是否有效，它必须返回一个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

您可以使用一些正则表达式来实现这一点。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);}

Answer 2

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

Answer 3

通过获取图像本身来检查怎么样，有效的 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)})或者如果您更喜欢使用 Image 构造函数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 实际上是一个真实有效的图像。