Як мовчки приховати піктограму «Зображення не знайдено», коли вихідне зображення 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 розміру зображення та встановивши для цього 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]% 20Найменший% 20прозорий% 20піксель.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;
}