Wie lösche ich ein Bildelement, wenn seine Quelldatei nicht existiert

Question

Ich mache eine Website mit einem Popup. Das Popup soll bis zu 12 Bilder enthalten. Ich nenne meine Bilder pizza1.jpg, pizza2.jpg, pizza3.jpg und so weiter.

Gibt es einen Weg mit reinem JavaScript, um die Bilder nur erscheinen zu lassen, wenn es tatsächlich eine Datei mit dem Namen gibt, nach dem ich gesucht habe?

This Question ist ähnlich, aber alle Antworten sind kompliziert und nur mäßig verwandt.

Answer 1

Sie können onError Ereignis für entfernen Objekt aus dem Pop-up verwenden:

<img src="src" onError="removeElement(this);" /> 

Überprüfen Sie, ob es funktioniert:

function removeElement(element) { 
    element.remove(); 
} 

Answer 2

Sie sollten das Ereignis onerror des Elements img behandeln.

Answer 3

Sie können eine Image instance erstellen und seine Onload-Ereignis verwenden, wenn es zu sehen hat geladen. Wenn dies der Fall ist, fügen Sie das Bild einfach an ein beliebiges Element an.

Demo

var imgurls = [ 
 
    "https://placekitten.com/g/64/64", 
 
    "https://placekitten.com/g/32/32", 
 
    "https://placekitten.com/g/none/200", 
 
    "https://placekitten.com/g/100/100", 
 
    "https://placekitten.com/g/24/24" 
 
]; 
 

 
imgurls.forEach(function(url){ 
 
    let img = new Image(); 
 
    img.onload = onImageLoad; 
 
    img.src = url; 
 
}); 
 
    
 
function onImageLoad(){ 
 
    document.body.appendChild(this); 
 
}

<div id="container"> 
 
    
 
</div>