Как определить, не работает ли URL изображения

Question

Как определить, не работает ли URL изображения

0

У меня проблема с javascript. Я создаю веб-сайт, который общается с MovieDB-API, который иногда возвращает неработающие URL-адреса.

Есть ли способ определить, приведет ли URL, возвращаемый API, к пустой странице? Возможно, проверкой ретроактивно, если изображение по умолчанию было "alt" -attribute? Очевидно, что, пока отображается альт-текст, программа "знает" о том, что URL-адрес терпит неудачу.

Если URL-адрес поврежден, я хочу, чтобы переменная IMG была заменена на путь к локальному образцу по умолчанию.

user1531921 22 апр. 2014, в 19:14

Источник

0

Покажите нам некоторый код о том, как вы получаете изображения, пожалуйста
Chancho 22 апр. 2014, в 16:31

Теги:

javascript

html

css

url

api

3 ответа

2

Вы можете использовать событие onerror чтобы проверить URL-адрес и посмотреть, можно ли загрузить изображение.

var url = 'http://www.somesite.com/image.jpg';

var img = new Image();

img.onerror = function() {
    console.log('image could not be loaded, setting default placeholder');
    image_tag.src = '/my_default_placeholder.gif';
}

img.src = url;

без какого-либо опубликованного кода, это просто общий пример того, как он будет работать,

adeneo 22 апр. 2014, в 14:25

1

Вы можете попробовать выполнить запрос Ajax для каждого изображения. Если он действительно существует, он вернет успех. В противном случае это вызовет ошибку, и вы можете поместить нужное изображение в это место. jQuery Ajax snippet:

$.ajax({
    type: "GET",
    url: url_to_img,
    success: function(result) {
        console.log("SUCCESS");
        $('#img-1234').attr('src', url);
    },
    error: function(result) {
        console.log("ERROR");
        // url broken
        $('#img-1234').attr('src', '/img/noImg.png');
    }
});

Надеюсь, поможет

gyss 22 апр. 2014, в 14:54

0

Спасибо! Я пошел с решением выше, но ваше решение может быть действительно полезным в будущем.
user1531921 22 апр. 2014, в 16:50

Ещё вопросы

Покажите нам некоторый код о том, как вы получаете изображения, пожалуйста
Спасибо! Я пошел с решением выше, но ваше решение может быть действительно полезным в будущем.

4dgaurav · Accepted Answer · 2014-04-22T14-41-00.000Z

CSS с включенным javascript

<img src="image.jpg" onerror="this.src='alternative.jpg';">

ИЛИ

JQuery

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

редактировать

$(document).ready(function () {
    $('img').error(function () {
        $(this).addClass('noImg');
    });
});

.noImg {
  position: relative;
  background: url() no-repeat center center; // or simple background color
  height: 100px;
  width: 100px;
  content: "Your content";
  margin: 0 10px 10px 0;
}

Спасибо! Но знаете ли вы какой-либо способ также отобразить заголовок фильма (который у меня уже есть в переменной) перед отсутствующим .png-изображением?