如何使用 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 实际上是一个真实有效的图像。