Как я могу проверить изображение с его URL?

Question

Мне нужно проверить, действителен ли URL-адрес изображения, что означает, что изображение корректно загружается в браузере.

Я пробовал использовать это:

const src = "https://i.imgur.com/vXPYhT5.jpeg"
const img = new Image()

img.onload = () => console.log("valid image :)")
img.onerror = () => console.log("invalid image :(")

img.crossOrigin = "anonymous"
img.src = src

Проблема заключается в том, что приведенный выше код выводит "invalid image :(" в некоторых мобильных браузерах, например Safari, даже когда изображение допустимо.

Чтобы быть более понятным: приведенный выше код не является кросс-браузерным решением для этой проблемы.

Пример пользовательского агента, эта проблема произошла:

{
  "userAgentInfo": {
    "browserName": "Safari",
    "browserVersion": "13.0.5",
    "engineName": "AppleWebKit",
    "engineVersion": "605.1.15",
    "isBot": false,
    "isMobile": true,
    "os": "CPU iPhone OS 13_3_1 like Mac OS X",
    "platform": "iPhone"
  }
}

PS1: The В изображении включены все виды CORS.

PS2: я не вижу ошибку, потому что это просто уведомление от трекера ошибок, например Airbrake.nofity("Invalid image") на img.onerror.

Answer 1

некоторые мобильные браузеры не загружают изображение, пока оно не будет помещено в DOM для уменьшения потребления данных. Так что у меня нет тестового устройства. Но вы можете попробовать этот код.

function validateImageUrl(url) {
  const image = document.createElement('img');
  image.onload = () => { console.log("valid image :)") }
  image.onerror = () => { console.log("invalid image :(") }

  image.crossOrigin = "anonymous"
  image.style.display = 'none';
  document.body.appendChild(image);
  image.src = url;

}

validateImageUrl('https://i.imgur.com/vXPYhT5.jpeg');

Answer 2

В соответствии с Mozilla CDN: конструктор Image() создает новый экземпляр HTMLImageElement. Функционально эквивалентно document.createElement('img'). Смотрите эту ссылку: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

Я также проверил, не работает ли эта функция в Opera на моих macOs! Тем не менее, он работает на всех других браузерах. см. эту ссылку: https://jsbin.com/hofitusoke/edit?html, js, консоль, выход

Более того, для совместимости с браузером упоминается, что для некоторых опер для мобильных устройств эта функция неизвестна!