Wie kann ich leere Bilder entfernen?

Question

Auf meiner Website habe ich leeren Bildrahmen so, wenn die Last Ressource schlägt fehl, weil es nicht existiert:

Dies ist ein Beispiel-Bild-Tag:

<img class="thumbnail" src="{{event.venue.icon}}" id="thumbnail">

Wie kann ich diese leeren Rahmen einfach entfernen?

Answer 1

prüft onerror Ereignis aus, wenn die Bild ausgeblendet es geladen wird, wenn Laden fehlschlägt:

<img src="someimage.jpg" onerror="this.style.display='none';" /> 

Answer 2

bindet an das Fehlerereignis für die Bilder und innerhalb dieser Methode können Sie die Behälter für alle Bilder entfernen, die zum Scheitern verurteilt Belastung. Hier ist ein Beispiel, aber schreiben Sie Ihren Code, wenn Sie etwas speziellere wollen:

$('.yourImageSelector').error(function() { 
    $(this).parent().remove(); 
}); 

Answer 3

Bind error Ereignis auf img-Tag wie folgt,

$(document).ready(function(){ 
 
    $('#myImg').on("error", function() { 
 
    $(this).remove(); // Execute with commenting this line and see the result 
 
    console.log(document.querySelector('img')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="myImg" src="compman.gif" alt="Computerman" width="107" height="98">

Kommentar $(this).remove(); und ausführen, Sie erhalten das "Computerman" als die Textalternative, die durch alt Attribut auch das img Element in der Konsole als Ergebnis angegeben wird.