How do I make a global placeholder tag without specifying weight and height?

Issue

Imagine this situation: I am making a website for a Minecraft server, and I forget to make a logo for the site, or I would like to just create it later. I want to keep the file name and HTML code all the same so it works when i finally change the logo. I do not want to save the file as a placeholder file due to caching issues, and I want to create an automatic placeholder image.

Example: I want to load this image: images/funworldicon.png. But there is a problem, it does not exist at the moment! I do not want anyone's cache to save a placeholder version of the icon incase it exists again, so I want to set the file to a different image (like a placeholder) whenever the main image has an error while loading.

What is the solution to this situation?

Solution

I'm not sure what you mean exactly by not uploading the entire HTML file again. You'll end up replacing the HTML file anytime you make updates to the page. If you wanted to point to a dead link and have it fail back to a placeholder image you could do something like this:

<img src="images/funworldicon.png" onerror="this.src='images/placeholder.png'">

Which will use Javascript's onerror to replace the source of the image to the placeholder if funworldicon.png fails to load.

Live Example:

<img src="images/funworldicon.png" onerror="this.src='https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png'">

Answered By - Nathan Champion