Есть ли способ легко проверить, является ли URL-адрес изображения действительным или нет?

Question

Я пытаюсь написать функцию, которая проверяет, является ли URL-адрес изображения фактическим изображением, если оно вернет true, иначе вернет false,

что-то в этом роде:

checkImage(imageURL){
  if imageURL.isReal{
    return true
 }
 return false
}

Я нашел много ответов, но они не работали как булевы функции

Answer 1

Наиболее элегантным решением является использование XMLHttpRequest и проверка кода ответа. Если это 200 , изображение существует, если это что-то другое, вполне возможно, что изображение - или, точнее, URL-адрес в целом - не существует. Вот пример:

function checkImage(url) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.send();
  request.onload = function() {
    status = request.status;
    if (request.status == 200) //if(statusText == OK)
    {
      console.log("image exists");
    } else {
      console.log("image doesn't exist");
    }
  }
}
checkImage("https://picsum.photos/200/300");

Ну, как я уже сказал, это более общий подход. Если вы хотите быть уверены, что это действительно изображение, вы можете использовать события onerror и onload объекта Image.

function checkImage(url) {
  var image = new Image();
  image.onload = function() {
    if (this.width > 0) {
      console.log("image exists");
    }
  }
  image.onerror = function() {
    console.log("image doesn't exist");
  }
  image.src = url;
}
checkImage("https://picsum.photos/200/300");

Answer 2

Вы можете использовать getResponseHeader XMLHttpRequest для проверки типа mime успешно возвращенного содержимого вашего запроса. Фактически, вы не можете знать содержание ответа только на основании http-кода ответа на ваш запрос.

Метод XMLHttpRequest getResponseHeader () возвращает строку содержащий текст значения конкретного заголовка. Если есть несколько заголовков ответа с тем же именем, тогда их значения возвращается в виде единой объединенной строки, где каждое значение отделен от предыдущего парой запятой и пробела. Метод getResponseHeader () возвращает значение в виде последовательности байтов UTF.

---

В этом примере запрос создается и отправляется, а readystatechange устанавливается обработчик для поиска ReadyState, чтобы указать, что заголовки были получены; в этом случае значение Заголовок Content-Type получен. Если Content-Type не желателен значение XMLHttpRequest отменяется вызовом abort ().

var client = new XMLHttpRequest();
client.open("GET", "unicorns-are-teh-awesome.txt", true);
client.send();

client.onreadystatechange = function() {
  if(this.readyState == this.HEADERS_RECEIVED) {
    var contentType = client.getResponseHeader("Content-Type");
    if (contentType != my_expected_type) {
      client.abort();
    }
  }
}

Всего наилучшего.