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

Оффтоп javascript
1

Привет всем! У меня возник вопрос по JavaScript. Я пытаюсь проверить, существует ли изображение по указанному пути.

Вот что я делаю:

let imagePath = document.getElementById('imagePathInput').value;

Я получаю путь к изображению из текстового поля. Теперь мне нужно как-то проверить, действительно ли по этому пути есть картинка.

Я знаю, что можно получить ширину и высоту изображения, но это не совсем то, что мне нужно. Мне просто надо узнать, есть ли файл по этому адресу.

Может кто-нибудь подсказать, как это сделать? Буду очень благодарен за помощь!

2

Можно использовать объект Image для проверки существования картинки. Вот пример:

function checkImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = url;
  });
}

Этот метод асинхронный, поэтому используй его с async/await или then(). Он вернет true, если картинка загрузилась, и false, если произошла ошибка. Учти, что это работает только для изображений из того же домена или с настроенным CORS.

3

Есть еще вариант - использовать fetch для проверки статуса ответа сервера. Примерно так:

function checkImage(url) {
return fetch(url, {method: ‘HEAD’})
.then(res => res.ok)
.catch(() => false);
}

Это тоже асинхронный метод, но он не загружает само изображение, а только проверяет его доступность. Правда, работает только для URL, а не для локальных файлов.