Есть способ проверить <img>
на наличие битой ссылки на изображение, а есть ли способ проверить именно ссылку на изображение?
-
Т.е. проверить, возвращает ли реквест на ссылку статус 200?– Klimenko Kirill2 авг 2018 в 7:34
3 ответа
Вообще все просто, создаем изображение и пытаемся загрузить его. Если получилось - ссылка есть, если не получилось, то вероятнее ссылки нет ( либо проблемы на сервере )
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');
-
3
С помощью 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';
};
-
Если на момент запуска скрипта img уже был обработан браузером, то ничего из этого не сработает 2 авг 2018 в 10:46
В 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('<p class="wait">Wait...</p>');
$.ajax($("#url").val())
.done(function(jqXHR) {
$("#img-container").append('<img class="ok" src="'+$("#url").val()+'">');
})
.fail(function(jqXHR) {
$("#img-container").append('<div><p><span class="wURL">Can\'t open URL: </span>'+$("#url").val()+'</p><p><span class="wURL">status: </span>'+jqXHR.status+'</p></div>');
})
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
<p class="label">
URL of image:
</p>
<input type="text" id="url">
<input type="button" id="check-it" value="Check it!">
</div>
<div id="img-container">
</div>
-
jQuery.ajax() Description: Perform an asynchronous HTTP (Ajax) request. api.jquery.com/jquery.ajax Перевод: выполняет асинхронный HTTP (Ajax) запрос. Согласно документации запрос всегда http.– user2189762 авг 2018 в 12:57
-