Как тихо скрывать значок "Изображение не найден", когда исходное изображение src не найдено

Ответ 1

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

Ответ 2

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

Ответ 3

Выполнение быстрого исследования ответа Andy 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 к созданию нового элемента.

Ответ 4

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

(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. 
        }
    }
})();

Ответ 5

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

Ответ 6

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

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

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

Ответ 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"
  />

и др.

Ответ 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;
}