Як приховати зламану піктограму зображення, використовуючи лише 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, воно не відображатиметься, навіть якщо зображення існує як style.display - це як додавання. Тож використовуйте його, коли вам не потрібні інші зображення для відображення.

display: 'none'; // in css

Якщо ми дамо його в CSS, то елемент не відображатиметься (як зображення, iframe, div подібний).

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

Посилання https://jsfiddle.net/02d9yshw/

Я думаю, що найпростіший спосіб - приховати розбитий значок зображення властивістю текст-відступ.

img {
    text-indent: -10000px
}

Очевидно, що це не працює, якщо ви хочете побачити атрибут "alt".

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

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

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

Мені сподобався відповідь на Ніка і грав навколо з цим рішенням. Знайшли чистіший метод. Оскільки :: до / :: після того, як псевдо не працює над заміненими елементами, такими як 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. Оскільки зображення було великим і мало завантажуватися, воно вимагало встановити фонове зображення у CSS на панелі завантаження Gif.

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

Встановлення прозорого 1x1 Gif вирішує цю проблему просто та ефективно без додавання коду через 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">

Спробуйте це побачити! ;)

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

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

Редагувати: я повернувся - для майбутніх googlers в 2019 році є спосіб стилізувати фактичний текст alt та текст alt в Shadow Dom, але він працює лише в інструментах для розробників. Таким чином, ви не можете використовувати його. Вибачте. Було б так приємно.

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