How do I delete an image element if it's source file doesn't exist

Question

I am making a site with a popup. The popup is supposed to have up to 12 images in it. I am calling my images pizza1.jpg, pizza2.jpg, pizza3.jpg, and so on.

Is there any way with pure JavaScript to make the images show up only if there is actually a file with the name I have told it to look for?

This Question is similar, but all the answers are complicated, and only moderately related.

Please check the answer there and if image does not exist, than do not show it. If you need further assistance, try to be more accurate, add some code. — skobaljic, May 14 '16 at 21:44
The other question's answers are only complex solutions to a problem much more complicated than mine. The accepted answer to this question is simple for my situation. — That One Actor, May 14 '16 at 21:58

score 5 · Accepted Answer · answered May 14 '16 at 21:46

5

You can use onError event for remove object from your popup:

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

Check if it will work:

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

answered May 14 '16 at 21:46

Marek Woźniak

1,766
16
34

score 1 · Answer 2 · answered May 14 '16 at 21:44

1

You should handle the onerror event of the img element.

answered May 14 '16 at 21:44

pomber

23,132
10
81
94

score 1 · Answer 3 · answered May 14 '16 at 21:47

You can create an Image instance and use its onload event to see if it has loaded. If so just append the image to whatever element.

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>

How do I delete an image element if it's source file doesn't exist

3 Answers3