Src kaynak resmi bulunamadığında "Resim bulunamadı" simgesi sessizce nasıl gizlenir

Bir görüntü dosyası bulunamadığında, işlenmiş bir HTML sayfasından klasik "Görüntü bulunamadı" simgesinin nasıl gizleneceğini biliyor musunuz ?

JavaScript / jQuery / CSS kullanan herhangi bir çalışma yöntemi var mı?

Sen kullanabilirsiniz onerrorbir görüntü yüküne başarısız olduğunda hareket etmek JavaScript olayı:

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

JQuery'de (sorduğunuzdan beri):

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

Veya tüm resimler için:

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

Görüntüleri gizlemek düzeni değiştirebilirse, visibility: hiddenbunun yerine kullanmalısınız .hide(). Web üzerindeki pek çok site, bunun yerine varsayılan bir "resim yok" srcresmi kullanır ve belirtilen resim konumu mevcut olmadığında özelliği o resme işaret eder .

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

Gary Willoughby'nin önerdiği çözümü biraz değiştirdim, çünkü kırılmış görüntü simgesini kısaca gösteriyor. Çözümüm:

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

Benim çözümümde resim başlangıçta gizlidir ve yalnızca başarıyla yüklendiğinde gösterilir. Bir dezavantajı vardır: kullanıcılar yarı yüklenmiş görüntüleri görmezler. Ve kullanıcı JS'yi devre dışı bıraktıysa, hiçbir zaman herhangi bir resim görmez

Her görüntü hatasını gizlemek için, bu JavaScript'i sayfanızın altına eklemeniz yeterlidir (kapanış gövde etiketinin hemen öncesine):

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

Cevap vermek için biraz geç olabilir, ama işte girişimim. Aynı sorunla karşılaştığımda, görüntü boyutunda bir div kullanarak ve bu div'e arka plan resmi ayarlayarak sorunu düzelttim. Görüntü bulunmazsa, div saydam hale getirilir, bu nedenle tamamı java-script kodu olmadan sessizce yapılır.

Andy E'nin cevabı hakkında hızlı bir araştırma yapmak , live()bağlanması mümkün değil error.

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

Yani gitmek zorundasın

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

error event handleryeni bir öğe oluşturmaya doğrudan bağlanır .

ng-srcAngular.js'de yönergeyi kullanırken hala işlevselken, tam olarak bunu yapmak için şık bir yöntem buldum ve benzer ...

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

temelde en kısa şeffaf GIF (görüldüğü gibi 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 )

Tabii ki bu gif bazı global değişkenlerin içinde tutulabilir, böylece şablonları bozmaz.

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

ve kullan

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

vb.

Sadece basit css kullanın

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