Проверка ссылки на изображение. Битая или нет

#jquery

Есть способ проверить  на наличие битой ссылки на изображение, а есть ли способ
проверить именно ссылку на изображение?

Проверка наличия изображения
    

Ответы

Ответ 1

Вообще все просто, создаем изображение и пытаемся загрузить его. Если получилось
- ссылка есть, если не получилось, то вероятнее ссылки нет ( либо проблемы на сервере )



const checkImgSrc = src => {
  const img = new Image();
  img.onload = function () { console.log(`valid src: ${src}`); }
  img.onerror = function () { console.log(`unvalid src: ${src}`); }
  img.src = src;
}


checkImgSrc('eruiqnwg');
// возможно ссылка уже устареет, но все же
checkImgSrc('https://fullhdpictures.com/wp-content/uploads/2015/03/Snow-Leopard-Full-HD-Wallpapers.jpg');


Ответ 2

С помощью jQuery

$('#myImage').on('error', function () {
  $(this).attr('src', 'path_to_default_image.png');
});


Нативный JS

var image = document.getElementByID('myImage');
image.onload = function () {
  console.log('Done');
};

image.onerror = function () {
  image.src = 'path_to_default_image.png';
};


Ответ 3

В JQuery можно проверить ссылку на изображение с помощью функции $.ajax.
Единственное условие: URL изображения и URL сайта должны иметь один и тот же протокол
(т. е. HTTP только с HTTP, а HTTPS только с HTTPS). По крайней мере, так в Google Chrome.
Это сделано для безопасности клиента. Подробнее см. https://ru.wikipedia.org/wiki/Правило_ограничения_домена
и https://learn.javascript.ru/same-origin-policy.

Код:
https://jsfiddle.net/0cjh96st/95/



$("#check-it").click (function () {
  $("#img-container").append('
Wait...
');
  $.ajax($("#url").val())
  .done(function(jqXHR) {
    $("#img-container").append('');
  })
  .fail(function(jqXHR) {
    $("#img-container").append('
Can\'t open URL: '+$("#url").val()+'
status: '+jqXHR.status+'
');
  })
  .always (function () {
  	$(".wait").remove();
  });
});
.label {
  display: inline-block;
  padding: 6px;
}
#img-container {
  display: flex;
  flex-wrap: wrap;
}
#img-container>* {
  display: inline-block;
  min-width: 100px;
  height: 100px;
  border: 3px solid #feb;
  margin: 3px;
  padding: 3px;
}
#img-container>.ok {
  border-color: #bef;
}
.wURL {
  font-weight: bold;
  color: #febfeb;
}

#url {
  width: 300px;
}


  

    URL of image: