Изящная обработка отображения удаленных изображений, которые могут отсутствовать

Question

я показываю удаленные изображения на моем сервисе

<img src="http://remote-site.com/imageX">

Однако иногда изображение уже исчезло, поэтому я получал 404 секунды или просто текст.

Вопрос -> как я могу перейти к универсальному изображению, как только получу что-то, что не является типом изображения?

Актуальный код, будь то в JQuery, Ruby и т. Д. Высоко ценится!

Answer 1

Событие error наступает, когда изображение не может быть загружено по какой-либо причине (ошибка соединения, HTTP 404, не данные изображения и т. Д.).Очень простым встроенным примером будет

<img src="http://example.com/image.jpg" onerror="this.src = 'generic-image.png';" />

Конечно, если вы хотите сделать это правильно, сделайте это в jQuery или другой библиотеке:

$("img.external").bind("error", function() { // assuming your external images have this CSS class
    this.src = "generic-image.png";
});

Answer 2

Если вы пишете PHP, вы можете использовать:

<?= (file_exists('http://remote-site.com/imageX'))?'<img src="http://remote-site.com/imageX">':'<img src="http://remote-site.com/genericImage.png">' ?>

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

Я использую это для пользовательских изображений в приложениях. Если они не загрузили изображение, отображается общий вид.

Эти изображения поступают из базы данных?