Html if image is not found

Handling missing illustrations – The Techniques

Swapping with a default image

Keep your page pretty by using onerror to fall back to a default image:

<img src="path_to_image.jpg" onerror="this.src='default.jpg'; //Because who needs 404 messages right?" alt="description">


Vanishing act for broken images

In the magical world of HTML, you can make the image element disappear when it's not found:

<img src="path_to_image.jpg" onerror="this.remove(); //Whoosh...gone!" alt="description">


Unleashing the power of JavaScript

Up your game with JavaScript for advanced error handling:

<img src="path_to_the_image.jpg" onerror="handleError(this); //Let JavaScript do its thing" alt="description">
<script>
function handleError(image) {
    // Insert majestic JavaScript magic here
}
</script>


Employing the <object> as a savior

An <object> takes an <img> under its wing, adding an extra layer of resilience:

<object data="image.jpg" type="image/jpeg">
    <img src="image.jpg" onerror="this.src='fallback.jpg'; //Backup to the rescue!" alt="description">
</object>


Upping accessibility with the power of alt text

Every <img> deserves an alt text, a textual superhero:

<img src="image.jpg" onerror="this.src='fallback.jpg';" alt="An image that ran away.">


Alt text is there for accessibility, and also doubles up as a lifebuoy when the image and the fallback go missing.

Dealing with complex situations

Avoiding the infinite loop

Dodging the infamous infinite loop of error events like Neo from the Matrix:

<img src="image.jpg" onerror="this.onerror=null; this.src='fallback.jpg'; //Hard stop on the loop de loop" alt="description">


This hard stop happens by turning onerror into null after the first attempt, halting the futile efforts to resuscitate the same fallback.

Ensuring server-side controls

Ensure your fallback image has permanent residency on your server:

<img src="image.jpg" onerror="this.src='/path/to/default.jpg'; //The location of my knight in shining armor" alt="description">


With a base url or similar function as your compass, you can ensure the path never strays.

Substituting missing images with...nothing?

Weird but true, sometimes you want the image to just disappear when it goes missing:

<img src="image.jpg" onerror="this.src=''; //It disappears just like my motivation on Monday mornings" alt="description">


Playing peek-a-boo with an empty src combined with onerror makes the image retreat without actually waving the white flag on the tag.

Testing your fallback measures

Testing your battle strategies ensures your fallback operation doesn't collapse:

1. Rename the image file to simulate a 404 error message.
2. Make sure your fallback image or logic is called to action as expected.

Two simple steps to fortify the defenses of your image handling.