Как скрыть изображение, поврежденное Icon, используя только CSS / HTML (без js)

У CSS/HTML нет способа узнать, не повреждено ли изображение ссылки, поэтому вам придется использовать JavaScript независимо от того, что

Но это минимальный метод для скрытия изображения или замены источника на резервную копию.

<img src="Error.src" onerror="this.style.display='none'"/>

или

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

Update

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

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

Обновление 2

Для параметра CSS см. ответ michalzuber ниже. Вы не можете скрыть все изображение, но вы измените внешний вид сломанной иконки.

Несмотря на то, что люди говорят здесь, вам совсем не нужен JavaScript, вам даже не нужен CSS!

Это действительно очень удобно и просто с HTML. Вы даже можете показать изображение по умолчанию, если изображение не загружается. Вот как...

Это также работает во всех браузерах, даже в IE8 (из 250 000 + посетителей сайтов, которые я размещал в сентябре 2015 года, ZERO люди использовали что-то хуже IE8, а это означает, что это решение работает буквально все).

Шаг 1. Ссылка на изображение как объект вместо img. Когда объекты терпят неудачу, они не показывают сломанные значки; они просто ничего не делают. Начиная с IE8, вы можете использовать теги Object и Img взаимозаменяемо. Вы можете изменять размер и делать все славные вещи, которые вы можете использовать с обычными изображениями. Не бойтесь тега объекта; это просто тег, ничего крупного и громоздкого загружается, и он ничего не замедляет. Вы просто используете тег img другим именем. Тест скорости показывает, что они используются одинаково.

Шаг 2: (Необязательно, но удивительно) Вставьте изображение по умолчанию внутри этого объекта. Если изображение, которое вы хотите на самом деле загружать в объект, изображение по умолчанию не будет отображаться. Например, вы можете отобразить список пользовательских аватаров, и если у кого-то еще нет изображения на сервере, он может показать изображение заполнителя... вообще не требуется JavaScript или CSS, но вы получаете особенности того, что большинство пользователей JavaScript.

Вот код...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... Да, это так просто.

Если вы хотите реализовать изображения по умолчанию с помощью CSS, вы можете сделать это еще проще в своем HTML, как это...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

... и просто добавьте CSS из этого ответа → https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js

Нашел отличное решение на https://bitsofco.de/styling-broken-images/

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

Я думаю, что самый простой способ - скрыть значок разбитого изображения с помощью свойства text-indent.

img {
    text-indent: -10000px
}

Очевидно, это не сработает, если вы хотите увидеть атрибут "alt".

Мне понравился Nick и он играл с этим решением. Нашел более чистый метод. Поскольку:: before/:: после того, как pseudos не работают на замененных элементах, таких как img и object, они будут работать, только если данные объекта (src) не загружены. Он держит HTML более чистым и добавит только псевдо, если объект не загружается.

http://codepen.io/anon/pen/xwqJKQ

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}

в случае, если вам нравится сохранять/нуждаться в изображении в качестве заполнителя, вы можете изменить непрозрачность до 0 с помощью onerror и некоторого css, чтобы установить размер изображения. Таким образом, вы не увидите неработающую ссылку, но страница загружается как обычно.

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

.img {
    width: 75px;
    height: 100px;
}

Использование CSS только жестко, но вы можете использовать CSS background-image вместо тегов <img>...

Что-то вроде этого:

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

Вот рабочая скрипка: http://jsfiddle.net/xbK6g/

Примечание. Я добавил границу в CSS на скрипте, чтобы продемонстрировать, где будет изображение.

Если вам нужно, чтобы контейнер изображения был видимым из-за того, что он был заполнен позже, и вы не хотите, чтобы его показывали и скрывали, вы можете вставить прозрачное изображение 1x1 внутри src:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

Я использовал это для этой цели. У меня был контейнер для изображений, в котором будет загружен образ через Ajax. Поскольку изображение было большим и немного загрузилось, потребовалось установить фоновое изображение в CSS загрузочной панели Gif.

Однако, поскольку src был пуст, в браузерах, которые его используют, значок сломанного изображения все еще появляется.

Настройка прозрачного 1x1 Gif устраняет эту проблему просто и эффективно без добавления кода через CSS или JavaScript.

Отсутствующие изображения либо просто не отображают ничего, либо отображают [? ], когда их источник не найден. Вместо этого вы можете захотеть заменить это графикой "пропавшего изображения", которая, как вы уверены, существует, поэтому есть лучшая визуальная обратная связь, что что-то не так. Или вы можете скрыть это полностью. Это возможно, потому что изображения, которые браузер не может устранить с помощью события ошибки "error", которое мы можем наблюдать.

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

Кроме того, вам может потребоваться инициировать какое-то действие Ajax для отправки электронной почты администратору сайта, когда это произойдет.

Используйте тег объекта. Добавьте альтернативный текст между такими тегами:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

С 2005 года браузеры Mozilla, такие как Firefox, поддерживают нестандартный псевдокласс CSS :-moz-broken который может выполнить именно этот запрос:

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::before также работает в Firefox 64 (хотя когда-то это был img[alt]::after так что это ненадежно). Я не могу заставить кого-то из них работать в Chrome 71.

Вы можете следовать этому пути как css-решение

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

Уловка с img::after - хорошая вещь, но имеет как минимум 2 недостатка:

1. не поддерживается всеми браузерами (например, не работает на Edge https://codepen.io/dsheiko/pen/VgYErm)
2. Вы не можете просто спрятать изображение, вы его закрываете - так что не очень полезно, когда вам нужно показать изображение по умолчанию в футляре

Я не знаю универсального решения без JavaScript, но для Firefox есть только одно:

img:-moz-broken{
  opacity: 0;
}

Для будущих googlers, в 2016 году существует безопасный для браузера чистый способ CSS скрыть пустые изображения с помощью селектора атрибутов:

img[src="Error.src"] {
    display: none;
}

Базовый и очень простой способ сделать это без какого-либо необходимого кода должен был бы просто предоставить пустой оператор alt. Затем браузер вернет изображение как пустое. Он будет выглядеть так, как если бы изображение не было.

Пример:

<img class="img_gal" alt="" src="awesome.jpg">

Попробуй посмотреть! ;)