So verbergen Sie das Symbol "Bild nicht gefunden" stillschweigend, wenn das Quellbild nicht gefunden wird

Wissen Sie, wie Sie das klassische Symbol "Bild nicht gefunden" vor einer gerenderten HTML-Seite verbergen können, wenn eine Bilddatei nicht gefunden wird?

Gibt es eine Arbeitsmethode mit JavaScript / jQuery / CSS?

Sie können das onerrorEreignis in JavaScript verwenden, um zu handeln, wenn ein Bild nicht geladen werden kann:

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

In jQuery (seit Sie gefragt haben):

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

Oder für alle Bilder:

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

Sie sollten visibility: hiddenanstelle von verwenden, .hide()wenn das Ausblenden der Bilder das Layout ändern könnte. Viele Websites im Web verwenden stattdessen ein Standardbild "kein Bild" und verweisen das srcAttribut auf dieses Bild, wenn der angegebene Bildspeicherort nicht verfügbar ist.

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

Ich habe die von Gary Willoughby vorgeschlagene Lösung leicht geändert, da das Symbol für defekte Bilder kurz angezeigt wird. Meine Lösung:

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

In meiner Lösung ist das Bild zunächst ausgeblendet und wird nur angezeigt, wenn es erfolgreich geladen wurde. Es hat einen Nachteil: Benutzer sehen keine Bilder mit halber Aufladung. Und wenn der Benutzer JS deaktiviert hat, werden keine Bilder angezeigt

Um jeden Bildfehler auszublenden, fügen Sie einfach dieses JavaScript am Ende Ihrer Seite hinzu (kurz vor dem schließenden Body-Tag):

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

Es mag etwas spät sein zu antworten, aber hier ist mein Versuch. Als ich auf dasselbe Problem stieß, habe ich es behoben, indem ich ein Div der Bildgröße verwendet und das Hintergrundbild auf dieses Div gesetzt habe. Wenn das Bild nicht gefunden wird, wird das div transparent gemacht, sodass alles ohne Java-Skript-Code ausgeführt wird.

Wenn Sie die Antwort von Andy E schnell recherchieren , ist es nicht möglich, sie zu live()binden error.

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

Also musst du gehen wie

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

Binden Sie das error event handlerbeim Erstellen eines neuen Elements direkt .

Ich habe eine raffinierte Methode gefunden, um genau dies zu tun, während ich immer noch funktionsfähig ng-srcbin, wenn ich eine Direktive in Angular.js verwende und ...

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

Es handelt sich im Grunde genommen um ein kürzestes transparentes GIF (siehe http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%) D0% B5% D1% 80 / [20121112]% 20Die% 20kleinste% 20transparente% 20pixel.html )

Natürlich könnte dieses GIF in einer globalen Variablen gespeichert werden, damit die Vorlagen nicht durcheinander gebracht werden.

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

und verwenden

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

etc.

Verwenden Sie einfach einfaches 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;
}