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

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

Любой метод работы с использованием JavaScript / jQuery / CSS?

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

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

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

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

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

Чтобы скрыть каждую ошибку изображения, просто добавьте этот код 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. 
        }
    }
})();

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

Проведя быстрое исследование ответа Энди Э , невозможно live()связать его 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созданию нового элемента.

Я нашел отличный способ сделать именно это, оставаясь при этом работоспособным при использовании 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% 20smaltest% 20transparent% 20pixel.html )

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

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

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

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

и т.п.

Просто используйте простой 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;
}