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

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
– skobaljic, Commented May 14, 2016 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
– That One Actor, Commented May 14, 2016 at 21:58

Marek Woźniak · Accepted Answer · 2016-05-14 21:46:11Z

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, 2016 at 21:46

Marek Woźniak

1,7961 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pomber · Accepted Answer · 2016-05-14 21:44:12Z

1

You should handle the onerror event of the img element.

answered May 14, 2016 at 21:44

pomber

24.1k15 gold badges83 silver badges96 bronze badges

Comments

Patrick Evans · Accepted Answer · 2016-05-14 21:47:59Z

1

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>

answered May 14, 2016 at 21:47

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related