Как скрыть изображение испорченного Icon используя только CSS / HTML?

Как я могу скрыть значок сломанного изображения? Пример :

У меня есть изображение с ошибкой SRC:

<img src="Error.src"/>

Решение должно работать во всех браузерах.

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

Но вот минимальный способ либо скрыть образ, либо заменить источник резервной копией.

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

или

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

Обновить

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

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/a/32928240/3196360

Нашел отличное решение на 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">

Если вы добавите alt с текстом alt = "abc", он покажет миниатюру показа поврежденных файлов и alt сообщение abc.

<img src="pic_trulli.jpg" alt="abc"/>

Если вы не добавите Alt, то покажет миниатюру шоу.

<img src="pic_trulli.jpg"/>

Если вы хотите скрыть поврежденный файл, просто добавьте alt = "", он не будет отображать поврежденный эскиз и любое сообщение alt (без использования js)

<img src="pic_trulli.jpg" alt=""/>

Если вы хотите скрыть сломанный, просто добавьте alt = "" & onerror = "this.style.display = 'none'", он не будет отображать поврежденный эскиз и какое-либо сообщение alt (с js)

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

В-четвертых, это немного опасно (не совсем), если вы хотите добавить какое-либо изображение в событие onerror, оно не будет отображаться, даже если Image существует в виде style.display, как при добавлении. Таким образом, используйте его, когда вам не нужно альтернативное изображение для отображения.

display: 'none'; // in css

Если мы дадим его в CSS, то элемент не будет отображаться (например, image, iframe, div и т. Д.).

Если вы хотите отобразить изображение и вы хотите отобразить полностью пустое пространство в случае ошибки, вы можете использовать, но также будьте осторожны, это не займет никакого места. Таким образом, вы должны держать его в div

Ссылка https://jsfiddle.net/02d9yshw/

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

img {
    text-indent: -10000px
}

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

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

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

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

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

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

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

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

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

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

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

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

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

Использовать только 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;

}

Вот рабочая скрипка .

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

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

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

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

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

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">

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

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

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

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

Трюк с img::after хороша, но имеет как минимум 2 недостатка:

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

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

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

В React работает та же идея, что и у других:

<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>

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

Пример:

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

Попробуйте, чтобы увидеть! ;)

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

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

Изменить: я вернулся - для будущих Google, в 2019 году есть способ стилизации фактического текста alt и изображения текста alt в Shadow Dom, но он работает только в инструментах разработчика. Таким образом, вы не можете использовать это. Сожалею. Это было бы так мило.

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}