Заглушка вместо неподгруженной картинки?

Question

[lexstile]

Задача: вывести какие-то дефолтные стили, когда изображение не подгрузилось - например, в центре блока стилизированную надпись - не удалось загрузить изображение.
Хотелось бы решить данную задачу без JS - средствами html/css с максимальной поддержкой браузеров - не говорю про IE, но чтобы во всех современных была поддержка.
Какие есть варианты решения проблемы?

Comments

[mletov]

Сомневаюсь, что это возможно без JS.
В основном, все рекомендуют onerror
https://stackoverflow.com/questions/22051573/how-t...

[lexstile]

mletov, благодарю за ответ.

[Sergey В.]

Откройте для себя Bootstrap
Там конечно есть js, но вёрстка гораздо проще и user-frendly результат.
Вот пример карточек товара.
Вот пример плейсхолдеров (для ожидания загрузки)

[Noder SS]

Почему вы не хотите использовать js? Можете попробовать через img.onload, подставлять картинку, которая у вас заранее скачана, а когда img.onload срабатывает, ставить ту, которая загрузилась. Такой же метод, кстати, используется на хабре

[lexstile]

Просто думал, можно универсально закрыть вопрос через html/css, спасибо за наводку.

Answer 1

[Вадим]

https://css-live.ru/articles/oformlenie-nezagruzhe...
https://codingartistweb.com/2022/11/style-broken-i...
https://habr.com/ru/post/279519/

Хотя бы пытались гуглить?

Comments

[lexstile]

По вашей первой ссылке, это читал, результат не устроил. Нужен iOS.

Остальные посмотрю, благодарю.

[Вадим]

lexstile, так Вам и рыбку съесть и аквариум выпить. Требований про ios в вопросе нет.
Определитесь, без js или чтоб везде работало..

[Вадим]

lexstile, во всех ссылках одна и та же техника. Так что можете не смотреть остальные.

[Вадим]

Ну а ещё версия ios не указана. Может уже и работает. Надо проверять.
На ipad6 c ios 14.6 не работает.
На iphone 12mini c ios 15.7 тоже не работает.

[Вадим]

lexstile, Так что лучшим вариантом для вас будет

<img onerror="this.src='base64 картинка заглушка'">

base64 - чтоб наверняка. Или ссылка на картинку, в которой Вы уверены.

[lexstile]

Вадим, ого, спасибо большое за информацию, попробуй ваш последний вариант.

Answer 2

[Александр]

Только если так:

<div class="image-container">
  <img src="image.jpg" alt="Image" onerror="this.src='https://komfort-pluss.ru/wp-content/uploads/2020/01/net-izobrazheniya.jpg'">
  <img src="image1.jpg" alt="Image" onerror="this.src='https://komfort-pluss.ru/wp-content/uploads/2020/01/net-izobrazheniya.jpg'">
  <img src="https://x-files.site/images/articles/96/1/7/sibsup_t3.jpg" alt="Image" onerror="this.src='https://komfort-pluss.ru/wp-content/uploads/2020/01/net-izobrazheniya.jpg'">
</div>

<style>
.image-container {
  position: relative;
}

.image-container img {
  width: 200px;
  height: auto;
}

.image-container::before {
  /* content: "Изображение не загрузилось"; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
</style>

Иначе при помощи JS