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

Question

This is NOT a duplicate of this question even though they have the same title.

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), every time I display the list of products, I check the server for the image related to the product, and if that file doesn't exist - I replace it with default image.

As far as i can tell this doesn't affect performance, but I was wondering if there are any alternatives to fix a "missing image" problem.

I'm using ASP.NET + C# (.NET 3.5)

Some code:

foreach (Item item in Items)
{
  string path = Path.Combine("~/images/", item.categoryImage);
  item.categoryImage = File.Exists(Server.MapPath(path)) ? item.categoryImage : GetImageDependingOnItemType();
}

Answer 1

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 2

Wouldn't you be better off alerting the users that their input was inconsistent? Is this impractical for some reason?

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

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

Answer 5

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 6

<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 7

Thanks so much. I like it.