Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как минимум иметь механизм управления их внешним видом, вместо стандартного поведения браузера.
Здесь мы не будем рассматривать возможности JS, где вы можете вылавливать события onerror объекта window, что позволит реализовать любую логику дальнейшего поведения (например, протоколирование фронт-енд ошибок на сервере). Мы остановимся на CSS трюках, чтобы визуально оформить наши битые картинки.
Объектом исследования станет следующий HTML пример:
|
1 2 3 4 5 |
<img src="Сломанный урл" width="200" height="200" alt="Broken image" /> |
Результат рендеринга такого <IMG> (возможно, немного иной для разных браузеров) вы видите в начале статьи.
Прячем калеку
Первое желание — это спрятать покалеченную картинку, по крайней мере, пустой квадрат выглядит лучше. Сделать это просто:
|
1 2 3 |
img { text-indent: -10000px; } |
Если изображение не прогрузилось, то вместо неё будет пустое пространство.
Заменяем битую картинку своим изображением
Аналогично тому, что сайты показывают специально оформленную страницу вместо стандартной 404й ошибки, было бы здорово показывать специально подготовленную картинку вместо битого изображения.
Это может логотип компании, или изображение с надписью — «Картинка подготавливается», тут ваша фантазия должна вам подсказать как обыграть данную ситуацию.
«Резервное» изображение цепляется как background-image самого тега IMG или его псевдо-контейнеров. Пример стилей:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
img { position: relative; } img::before { width: 100%; height: 100%; position: absolute; content: ""; background: #fff url(https://ВАША-КАРТИНКА) center center no-repeat; background-size: contain; } |
По сути ясно, что сам контейнер IMG и его псевдо-элементы, идут поверх слоя «битой» картинки, и, таким образом, маскируют её от пользователя.