Show a custom image for some images if image not found - Lighttpd

Question

I have a site that creates images for some bit of content after the content is created. I'm trying to figure out what to do in between the time the content is created and the image is created. My thought is that I might be able to set a custom image to display on a 404 error on the original image. However, I'm not sure how to do this with lighttpd. Any ideas or alternatives?

EDIT: The issue is the user isn't the one creating the content, it's being created by a process. Basically we are adding items to a catalog and we want to create a standardized catalog image from an image supplied by the product provider. However, I don't want a slow server on the provider end to slow down the addition of new products. So a separate process goes through and creates the image later, where available. I guess I could have the system create a default image when we create the product and then overwrite it later when we create the image from the provider supplied image.

Answer 1

Use the <object> tag in HTML with a fallback to the default image.

<P>                 <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space" 
        classid="http://www.observer.mars/TheEarth.py"&gt;
                    <!-- Else, try the MPEG video -->
  <OBJECT data="TheEarth.mpeg" type="application/mpeg">
                    <!-- Else, try the GIF image -->
    <OBJECT data="TheEarth.gif" type="image/gif">
                    <!-- Else render the text -->
     The <STRONG>Earth</STRONG> as seen from space.
    </OBJECT>
  </OBJECT>
</OBJECT>
</P>

(Example from w3.org)

Answer 2

As I understand your problem: You want to show an intermediate image until the real image has been generated?

You could display a loading image and use AJAX to change that DOM node into the real image when it's been created. You could write it from scratch or use any of the well known and stable AJAX libraries out there, if you have no preference of your own take a look at jQuery.

Answer 3

Further to @kentlarsson - if you want to do it via Javascript, I recently found this code: http://jquery.com/plugins/project/Preload and the demo at http://demos.flesler.com/jquery/preload/placeholder/ which does as he suggests - with its 'notFound' option.

I don't know enough about lighttpd to tell you about setting up a custom image with one or more subdirectories in a site though.

Answer 4

I think you could probably solve this on the client side alone.

Based on Jaspers' answer, you could do:

<OBJECT data="/images/generated_image_xyz.png" type="image/png">
     Loading..<blink>.</blink>
</OBJECT>

Also layering backgrounds using CSS you could do:

<style type="text/css">
    .content_image { width:100px; height: 100px; 
        background: transparent url('/images/default_image.png') no-repeat }
    .content_image div { width:100px; height: 100px; }
</style>

<div class="content_image">
     <div style="background: 
         transparent url('/images/generated_image_xyz.png') no-repeat" />
</div>

The latter solution assumes you don't have any transparency in your generated image.

Answer 5

Another alternative on the client side is to do:

<img src="/images/generated_image_xyz.png" 
    onerror="this.src='/images/default_image.png'; this.title='Loading...';" />