Как скрыть значок «Изображение не найдено», если исходное изображение src не найдено

Question

Знаете ли вы, как скрыть классический значок "Изображение не найдено" с отрендеренной HTML-страницы, когда файл изображения не найден?

Любой метод работы, использующий JavaScript / jQuery /CSS

Answer 1

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

Answer 2

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

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

В jQuery (так как вы спросили):

$("#myImg").error(function () { 
    $(this).hide(); 
});

Или для всех изображений:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Вы должны использовать visibility: hidden вместо .hide(), если скрытие изображений может изменить макет. Многие сайты в Интернете вместо этого используют изображение по умолчанию «без изображения», указывая атрибут src на это изображение, когда указанное местоположение изображения недоступно.

Answer 3

Я немного изменил решение, предложенное Гари Уиллоуби, потому что оно кратко показывает разбитое изображение. Мое решение:

    <img src="..." style="display: none" onload="this.style.display=''">

В моем решении изображение изначально скрыто и отображается только при успешной загрузке. У него есть недостаток: пользователи не увидят загруженные изображения. А если пользователь отключил JS, то он никогда не увидит никаких изображений

Answer 4

Может быть немного поздно ответить, но вот моя попытка. Когда я столкнулся с той же проблемой, я исправил ее, используя div размера изображения и установив background-image для этого div. Если изображение не найдено, div визуализируется прозрачным, поэтому все это делается без кода java-скрипта.

Answer 5

Чтобы скрыть каждую ошибку изображения, просто добавьте этот JavaScript в нижней части вашей страницы (непосредственно перед закрывающим тегом body):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Answer 6

Проводя быстрое исследование ответа Энди E , невозможно live() bind error.

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

Так что вам нужно идти как

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

, напрямую связывающий error event handler при создании нового элемента.

Answer 7

Я нашел изящный метод, чтобы сделать именно это, хотя он по-прежнему функционален при использовании директивы ng-src в Angular.js и т. П.

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

это в основном самый короткий прозрачный GIF (как видно http://proger.i -forge.net /% D0% 9A% D0% BE% D0% BC% D0% BF% D1% 8C% D1% 8E% D1% 82% D0% B5% D1% 80 /[20121112]% 20The% 20smallest% 20transparent% 20pixel.html )

конечно, этот gif можно хранить внутри некоторой глобальной переменной, чтобы не испортить шаблоны.

<script>
  window.fallbackGif = "..."
</script>

и использовать

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

и т. Д.

Answer 8

Просто используйте простой CSS

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}