it-swarm.com.ru

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

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

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

<img src="Error.src"/>

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

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

128
Geray Suinov

У 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 см. ответ Михальцубера ниже. Вы не можете скрыть все изображение, но вы изменяете, как выглядит сломанный значок.

211
Kevin Jantzer

Несмотря на то, что люди здесь говорят, вам вообще не нужен 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

112
Nick Steele

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

53
michalzuber

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

img {
    text-indent: -10000px
}

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

13
Burnee

Мне понравился answer by Ник и я поиграл с этим решением. Нашел более чистый метод. Поскольку псевдо: :: before/:: after не работают с заменяемыми элементами, такими как 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');
  }
}
12
Bartezz

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

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

.img {
    width: 75px;
    height: 100px;
}
11
Ewald Bos

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

9
Dryden Long

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

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

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

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

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

6
user2596313

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

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

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

2
FinkAvenue

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

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

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

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

2
Ali panahiyan

Начиная с 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.

1
Adam Katz

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

1
Cenk YAGMUR

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

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

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

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

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

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

 1st

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

<img src="pic_trulli.jpg"/>

 2nd

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

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

0
P Satish Patro