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

Question

[kochurinn]

Всем привет!
Вопрос такой, можно ли сделать так, чтобы на всем сайте, где ссылка на изображение не верная или по ссылке нет такой картинки, то он выводил картинку по умолчанию? (изображение "нет фото")

Comments

[Антон Литвиненко]

Такое нужно обычно, там где картинка выводится динамически, например из админки. Например на пхп. Тогда мы просто проверяем её существование с помощью if и если её нет с помощью else отдаём заглушку

Answer 1

[kochurinn]

<script>
$(document).ready(function()
{
    $(".backup_picture").on("error", function(){
        $(this).attr('src', './images/nopicture.png');
    });
});
</script>

<img class='backup_picture' src='./images/nonexistent_image_file.png' />

Comments

[Semantic.Moscow]

ещё влепите туда анимированную заглушку с анимированной сменой заглушки на подменную картинку, чтобы было больше мишуры, а клиент подождёт, не страшно.

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

Answer 2

[Semantic.Moscow]

подложите фон "нет фото" под все картинки.
если картинка не загрузилась, то будет виден ваш фон

Comments

[kochurinn]

Не, это очень плохое решение на мой взгляд.
к примеру размер картинки "нет фото" квадратное, а оригинальное фото прямоугольное, получится так, что "нет фото" будет вылезать сзади

[Антон]

kochurinn, background-size

[Semantic.Moscow]

kochurinn, ну так есть же min-wight для background, который сделать заведомо меньше любой картинки, но в размер запасного фона.

ну, или растягиваемую/бесшовную картинку на фон,
можно и градиентом