Как удалить элемент изображения, если его исходный файл не существует

Question

Я создаю сайт со всплывающим окном. Предполагается, что в нем будет до 12 изображений. Я вызываю свои образы pizza1.jpg, pizza2.jpg, pizza3.jpg и так далее.

Есть ли способ с использованием чистого JavaScript, чтобы изображения отображались только в том случае, если на самом деле есть файл с именем, которое я сказал ему искать?

This Question похоже, но все ответы сложны и связаны только умеренно.

Answer 1

Вы можете использовать onError событие для объекта требуется удалить из всплывающего окна:

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

Проверьте, если он будет работать:

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

Answer 2

Вы должны обработать событие onerror элемента img.

Answer 3

Вы можете создать Image instance и использовать его OnLoad событие, чтобы увидеть, если он загружен. Если это так, просто добавьте изображение в любой элемент.

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>