Best way to display default image if specified image file is not found?

Question

I\'ve got your average e-Commerce app, I store ITEM_IMAGE_NAME in the database, and sometimes managers MISSPELL the image name.

To avoid \"missing images\" (red X in IE

Answer 1

I think your way is pretty much OK. I'd do it in a function or do in .categoryImage accessor.

Answer 2

I think I would find a way to make the data consistent rather than allowing users to enter inconsistent data. Perhaps your management app could allow the manager to select an existing image or upload a new one, then set the name of the image based on this input so that you'd be assured that the image will exist. Only remove an image when all references to it have been removed from the database. Restrict the interaction with the data to your app so that people can't make those sorts of mistakes.

Another way to handle this would be to have a handler (or a controller in ASP.NET MVC) that does the image lookup based on id and returns the image data. Coupled with caching this could be very efficient and would allow you to do image replacement as well.

Answer 3

You can specify on the server what image should be returned for all requests to non-existent image files. That way the user can get a "2 AWESUM 2 SHO" lolcat instead of a red x.

Answer 4

You might consider something with javascript

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'">

Edit: Or program a 404.aspx returning a default image, if a nonexisting image was requested.

Answer 5

<style>
  .fallback { background-image: url("fallback.png"); }
</style>

<img class="fallback" src="missing.png" width="400" height="300">

If missing.png loads, it will cover the space allocated for it, as if the fallback were not specified. (Assuming it's not transparent.)

If missing.png fails to load, the space will instead be filled with fallback.png. You'll still get a little "broken image" icon, but I prefer it that way... a little hint that says "fix me".

If your images aren't all the same size, you'll notice that the background tiles by default. You can use background-repeat: no-repeat; if you don't like that.

Answer 6

I like Erik's solution, but without removing the event after the first execution, because if you are using that code in, let's say, an MVC partial view, this will work only the first time it is loaded. So I'd go with:

<img src="image.jpg" onerror="this.src='default.jpg';" />

In case you have many images in the same situation, like a grid, you can do this instead:

$("img").on("error", function () {
    $(this).attr('src', 'default.jpg');
});

Of course, you may want to use a more specific jQuery selector.