Можно ли обнаружить поврежденные / незагруженные (ошибочные) изображения с помощью CSS?

Я хотел бы дать сломанным / ошибочным изображениям дополнительный CSS:

img:error {
  max-width: 20px;
  max-height: 20px;
}

но это не работает Есть ли способ с чистым CSS, чтобы сделать это? Есть img псевдоселектор для этого? Или даже лучше: грязный взлом, который работает?

Я посмотрел вокруг, но, кажется, никто не задается вопросом =)

(Да, я знаю, что JS может сделать это, и я знаю, как; нет необходимости упоминать это.)

Источник

6 ответов

Решение

В спецификациях или черновиках CSS нет никакого способа, но у Firefox есть проприетарный селектор (псевдокласс). :-moz-broken, Его документация очень лаконична и гласит: "предназначена для использования в основном разработчиками тем", но ее можно использовать, например, следующим образом:

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

Хотя в документации говорится, что он "соответствует элементам, представляющим неработающие ссылки на изображения", на самом деле он соответствует поврежденным изображениям (img элемент, где src атрибут не относится к изображению), являются ли они ссылками или нет. Предположительно, "ссылки" здесь действительно означают "ссылки".

В CSS 2.1 говорится: "Данная спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML). Это будет определено более подробно в будущей спецификации ". Но уровень селекторов 3 (CSS3 селекторы) просто говорит о них:" Они объяснены в CSS 2.1 ". На практике браузеры обрабатывают их по-разному. Как ни странно, Firefox поддерживает :-moz-broken:after но игнорирует :-moz-broken:before, Он не поддерживает ни один из этих псевдоэлементов для обычных изображений, но img:after также поддерживается для разорванного изображения (т. е. указанное содержимое появляется после alt значение атрибута).

Источник

Для этого вы должны использовать атрибут alt, который отображается, если ссылка не работает, и вы можете также стилизовать фон изображения: пример:

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

Эти стили будут скрыты при показе изображения. http://codepen.io/anon/pen/Kxipq Как вы можете видеть, мы не проверяем битые ссылки, но предлагаем альтернативные, полезные для слепых людей, поисковики, что угодно, и некоторые дополнительные стили заканчивают это:)

некоторые дополнительные рекомендации по использованию атрибутов Image alt

Источник 
      <img src="not_found_image.png" onerror='this.style.display = "none"' />

из:https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/

Источник

НЕТ нет: ошибка псевдокласса. Это хороший сайт для полного списка того, что доступно:

http://reference.sitepoint.com/css/css3psuedoclasses

Июль 2015 г. РЕДАКТИРОВАНИЕ / ДОПОЛНЕНИЕ:
(Спасибо, Rudie)

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Источник

Нет. В селекторах уровня 2.1 или 3 нет ничего такого, что позволяло бы нацеливать подобное изображение.

Источник

Это близко:

      <style>
    img[data-broken="true"] {
        visibility: hidden;
    }
</style>

<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">

Строго говоря, он по-прежнему использует JavaScript. Но JS содержится в HTML-коде изображения.

Источник
Другие вопросы по тегам