Скрытие иконки «Изображение не найдено» в HTML: CSS, JS

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

Для того чтобы устранить значок "Изображение не найдено", задайте обработчик события onerror для элемента <img>. Он изменит его стиль на none в случае неудачной попытки загрузки:

<img src="missing-image.jpg" onerror="this.style.display='none';" />

В случае неверного значения атрибута src сработает onerror. Он устанавливает для элемента <img> значение display: none, что исключает его из DOM-структуры веб-страницы.

Мягкая устойчивостью к ошибкам: теоретически и на практике

Попытка обратиться по неправильному пути к изображению чаще всего приводит к стандартной реакции браузера, которая включает отображение значка поврежденного изображения. Это может «ломать» дизайн вашего сайта и ухудшать впечатление от взаимодействия с ним. Изящное обработка таких случаев помогает улучшить пользовательский опыт.

Поддержка ваших макетов

Помимо HTML-атрибута onerror, существуют и другие инструменты. Одним из них является CSS, который позволяет дизайнерам сохранять пространственную целостность макетов, применяя visibility: hidden, а не display: none для незагрузившихся изображений.

img[src=""] { 
  visibility: hidden; // Вуаля! Я все еще занимаю место, но меня не видно!
}

Отличие visibility: hidden от display: none заключается в том, что первое сохраняет пространственные параметры элемента макета, делая его невидимым для глаз пользователя.

Замена на заполнители

Если вы предпочитаете не просто скрывать изображение, но и заменять его на заполнитель, то можно воспользоваться jQuery:

$("img").on("error", function() {
  $(this).attr("src", "default-placeholder.png"); // Возникли проблемы со снимком? Используем заполнитель!
});

В данном сценарии на jQuery предусмотрена замена незагружившихся изображений на заранее подготовленные заменители — это информативный и стильный способ предлагать альтернативный контент.

Div-элементы и фоны: альтернативный подход

Одним из вариантов загрузка изображений вместо тега <img> является использование div с фоном заданном через background-image. Это позволит избежать появление значков ошибок загрузки.

<div style="background-image: url('image.jpg'); height: 100px; width: 100px;"></div>

Использование фонового изображения открывает больше возможностей для контроля отображения изображений.

Глобальная обработка ошибок изображений

Установка обработчика onerror для каждого изображения — процесс, требующий значительных усилий. Вот способ решить проблему глобальной обработки ошибок:

window.addEventListener("load", function() {
  document.querySelectorAll('img').forEach(function(img) {
    img.onerror = function() {
      this.style.display = 'none'; // Проблемы с загрузкой? Сделаем изображение незаметным!
    };
  });
});

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

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

Наглядный пример реализации:

До:

Рамка изображения: 🖼️
Визуальная ошибка: ❌🖼️
Текст альтернативы: (Изображение не найдено)

После применения нашего решения:

img[src=""], img:not([src]) {
  display: none; /* До свидания, ошибка! */
}

После:

Рамка изображения: 🖼️
Ошибка мягко обработана: ✨ (Совершенно невидимо)
Нет текста альтернативы.

И ошибка исчезает за считанные секунды! ✨🖼️✨

Глубокое погружение в обработку ошибок

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

• Изменения в макете: Обратите внимание на возможные изменения в макете из-за применения display: none;.
• Влияние на доступность: Обеспечьте предоставление альтернативных текстов через атрибут alt для пользователей со специальными потребностями.
• Поведение браузера и настройки пользователей: Обеспечьте корректное функционирование вашего сайта даже при отключении JavaScript при использовании пользователями.
• Постоянное улучшение: Стройте основу, которая будет работать без JavaScript или CSS, и далее улучшайте её, где это возможно.
• Производительность: Использование асинхронной загрузки скриптов или отложенной стратегии выполнения может улучшить начальную скорость загрузки.

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

1. Stack Overflow: Using onerror to handle broken images
2. W3Schools: JavaScript HTML DOM EventListener
3. W3Schools: HTML onerror Event Attribute
4. Stack Overflow: How to detect if an image is loaded or not
5. Блог Джереми Кита: Предоставление альтернативного текста для фоновых изображений в CSS