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

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

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

<img src="Error.src"/>

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

Использование только CSS или HTML, а не JS.

ОТВЕТЫ

Ответ 1

У 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

Несмотря на то, что люди говорят здесь, вам совсем не нужен 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 из этого ответа → fooobar.com/questions/47385/...

Ответ 3

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

Ответ 4

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

img {
    text-indent: -10000px
}

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

Ответ 5

Мне понравился 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');
  }
}

Ответ 6

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

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

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

Ответ 7

Использовать только 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 на скрипке, чтобы продемонстрировать, где будет изображение.

Ответ 8

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

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

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

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

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

Ответ 9

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

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

1st

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

<img src="pic_trulli.jpg"/>

2nd

Если вы хотите скрыть поврежденный файл, просто добавьте 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, то элемент не будет отображаться (как, например, изображение, iframe, div).

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

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

Ответ 10

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

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

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

Ответ 11

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

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

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

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

Ответ 12

Вы можете следовать этому пути как 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">

Ответ 13

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

Ответ 14

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

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

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

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

Ответ 15

<img src="/image_url" alt=""/>

Ответ 16

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

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

Ответ 17

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

Пример:

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

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