How to override the standard fallback image

Question

When the server cannot find the image requested it sends a 404 and replaces it with a standard fallback image like this:

<img src="fallback.jpg"/>

I was wondering if it was possible that you could substitute another image for the fallback image.

Try this: https://stackoverflow.com/q/980855 – Apr 25 '18 at 00:45 — , Apr 25 '18 at 00:45

score 1 · Answer 1 · answered Apr 25 '18 at 00:48

Do you mean like a fallback image? If so consider this HTML solution

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
    <head> 
        <title>Object Test</title>
     </head> 
    <body> 
        <object data="http://stackoverflow.com/does-not-exist.png" type="image/png"> 
            <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" />
        </object> 
    </body> 
</html>

your answer is very interesting but it is not as efficient as the other one — mathmaniac88, Apr 27 '18 at 04:29

score 0 · Accepted Answer · answered Apr 25 '18 at 00:55

A simple JS solution that iterates through all images on the page would be as follows:

// Get container of all img elements on page
var images = document.getElementsByTagName('img');

// Iterate through images
for (var i = 0; i < images.length; i++) {

    // Add event handler on image error
    images[i].addEventListener('error', function(e) {

        // Update SRC to custom fallback image
        e.target.src = "http://via.placeholder.com/150x150";

    });
}

How to override the standard fallback image

2 Answers2