Как установить стандартное изображение при неверном src в HTML

Быстрый ответ

Если при загрузке основного изображения в теге <img> возникают проблемы, специальный атрибут onerror позволит заменить его альтернативным:

<img src="broken.jpg" onerror="this.src='default.png';" alt="описание" />

В данном случае, если broken.jpg не удалось загрузить, используется запасное default.png. Это гарантирует плавный переход на альтернативное изображение и улучшает пользовательский опыт.

Использование HTML-тега Object

Интересной альтернативой может стать тег <object>, в который можно вложить тег <img> для случая недоступности основного изображения:

<object data="image.jpg" type="image/jpeg">
    <img src="default.png" alt="описание" />
</object>

Если загрузка image.jpg не происходит, пользователь увидит default.png. В свою очередь, поддержка тега <object> большинством браузеров делает его надёжным инструментом.

Игрушки с подменой изображений: делаем процесс интерактивным

Такой подход к обработке ошибок возможно превратить в творческую игру:

<!-- Кто живет здесь, вообще-то? -->
<object data="easterbunny.jpg" type="image/jpeg">
    <!-- Ой, да это же Пасхалка! -->
    <img src="eastereggs.png" alt="описание" />
</object>

Работаем с CSS: появление и исчезновение изображения

Создадим псевдоэлемент с изображением-гвоздикой, используя :before и content в CSS:

.img-container:before {
    content: url('default.png');
    display: none;
}

.img-container img {
    display: block;
}

.img-container img:invalid + :before {
    display: block;
    /* А вот и наша гвоздика! */
}

Таким образом, для контейнера .img-container предусмотрено запасное изображение, которое "оживает" с помощью CSS, когда основное отсутствует.

Расширяем горизонты: тег

Для создания адаптивных изображений применяется <picture> в компании с элементами <source>:

<picture>
    <source srcset="hero-image.webp" type="image/webp" />
    <source srcset="hero-image.jpg" type="image/jpeg" />
    <img src="default.png" alt="Главное изображение" />
</picture>

Браузер выберет лучший вариант из доступных источников. Если же ни одно изображение не подходит, будет использовано запасное из img.

Будьте в тренде: адаптивность — наше всё

Атрибут media позволяет выбрать наиболее подходящее изображение в зависимости от размера экрана:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg" />
    <source media="(max-width: 799px)" srcset="small.jpg" />
    <img src="default.png" alt="описание" />
</picture>

Человечность прежде всего: альтернативный текст

При формулировке альтернативного текста в атрибуте alt старайтесь быть конкретными и описательными. Это улучшит доступность:

<img src="broken.jpg" onerror="this.src='default.png';" alt="Добрые слова бывают дороже золота." />

Надёжный механизм

Если вы не используете JavaScript, можете интегрировать обработку ошибки прямо в тег <img>:

<img src="image.jpg" onerror="if(this.src != 'default.png') this.src='default.png';" alt="Illustration description" />

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

Впереди планеты всей: проверяем и учитываем совместимость

Перед применением любого подхода не забудьте проверить поддерживает ли ваши теги браузер, воспользовавшись, например, ресурсом Can I Use.

Играемся с оттенками в CSS

С помощью CSS-классов можно с лёгкостью контролировать различные ситуации, указав для них стандартные изображения:

.img-error {
    background: url('default.png') no-repeat center center;
    display: inline-block; /* или block, если вам больше нравится */
}

Так, даже если возникли проблемы с главным изображением, вы получите стильный результат:

<img src="broken.jpg" class="img-error" alt="описание" />

jQuery всегда готов помочь

Используйте jQuery для динамической замены повреждённых изображений:

$('img').on('error', function() {
    if (this.src !== 'default.png') {
        this.src = 'default.png';
    }
});

Несмотря на потребность в jQuery, этот скрипт является гибким и быстрым за счёт своей динамичности.

Демонстрируем возможности CSS

Сделайте свой проект более лёгким, используя CSS для обработки ошибок загрузки:

.img-error:after {
    content: '';
    background-image: url('default.png');
    /* сюда добавьте дополнительные стили для контейнера */
}

Если вы стараетесь минимизировать использование JavaScript, CSS может стать отличным решением для вас.

onerror

onerror может без лишних сложностей заменить src в <img> на картинку по умолчанию, если произойдёт ошибка загрузки:

<img src="image.jpg" onerror="this.onerror=null;this.src='default.png';" alt="описание" />

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

Визуализация

Представьте HTML-элемент как картину в раме:

Рама 🖼️: |______|

Вот наша рама без идеальной картины (src):

<img src="starrynight.jpg" onerror="this.src='empty_frame.jpg';" />

В таком случае за рамой всегда находится запасное изображение:

Рама 🖼️: |🌌 (starrynight.jpg)|
           |🖼️ (empty_frame.jpg) — на всякий случай|

Таким образом обеспечивается непрерывность дизайна стены (веб-страницы), незаметно скрывая отсутствие основного произведения искусства.

Полезные материалы