Как можно отловить событие, момент, что изображения не существует и вместо него вставить другое?

Question

[Igorek1999]

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

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

Answer 1

[monochromer]

Два варианта:
1. Если серверный рендер, то наличие картинки можно проверять в шаблонизаторе и подставлять другой вариант

{% if post.image %}
<img src="{{ post.image }}" />
{% else %}
<!-- placeholder -->
{% endif %}

2. На клиенте - использовать событие `error` у картинки

<img src="..." onerror="..." />

Answer 2

[Eugen]

// Nach errors suchen und durch das Bild ersetzen
$('img').on('error', function(){
    $(this).attr('src', 'broken-image.png');
});
 
// Oder ausblenden
$("img").on('error', function(){
    $(this).hide();
});

Answer 3

[Владимир Коротенко]

Картинки в отдельном локайшене и для него указываете 404 обработчик с вашей картинкой по умолчанию. Все!

Answer 4

[Тарас Шульга]

Просто сделайте проверку, если при отправке полн оказалось пустым то поставьте картинку по умолчанию - вот и все.