Afficher une image personnalisée pour certaines images si l'image n'est pas trouvée - Lighttpd

Question

J'ai un site qui crée des images pour un peu de contenu après la création du contenu. J'essaie de comprendre ce qu'il faut faire entre le moment où le contenu est créé et l'image est créée. Ma pensée est que je pourrais être en mesure de définir une image personnalisée pour afficher une erreur 404 sur l'image originale. Cependant, je ne suis pas sûr de savoir comment faire avec lighttpd. Des idées ou des alternatives?

EDIT: Le problème est que l'utilisateur n'est pas celui qui crée le contenu, il est créé par un processus. Fondamentalement, nous ajoutons des éléments à un catalogue et nous voulons créer une image de catalogue normalisée à partir d'une image fournie par le fournisseur du produit. Cependant, je ne veux pas qu'un serveur lent sur la fin du fournisseur ralentisse l'ajout de nouveaux produits. Ainsi, un processus séparé traverse et crée l'image plus tard, si disponible. Je suppose que je pourrais avoir le système créer une image par défaut lorsque nous créons le produit, puis l'écraser plus tard lorsque nous créons l'image à partir de l'image fournie par le fournisseur.

Answer 1

Utilisez la balise <object> en HTML avec un repli vers l'image par défaut.

<P>     <!-- First, try the Python applet --> 
<OBJECT title="The Earth as seen from space" 
     classid="http://www.observer.mars/TheEarth.py"> 
        <!-- 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> 

(exemple de w3.org)

Answer 2

Si je comprends bien votre problème: Vous voulez afficher une image intermédiaire jusqu'à ce que l'image réelle a été généré?

Vous pouvez afficher une image de chargement et utiliser AJAX pour modifier ce nœud DOM dans la image réelle quand il a été créé. Vous pouvez l'écrire à partir de zéro ou utiliser l'une des bibliothèques AJAX bien connues et stables là-bas, si vous n'avez pas de préférence, jetez un oeil à jQuery.

Answer 3

Suite à @kentlarsson - si vous voulez le faire via Javascript, j'ai récemment trouvé ce code: http://jquery.com/plugins/project/Preload et la démo à http://demos.flesler.com/jquery/preload/placeholder/ qui fait comme il le suggère - avec son option « notFound ».

Je ne connais pas assez lighttpd pour vous parler de la configuration d'une image personnalisée avec un ou plusieurs sous-répertoires dans un site.

Answer 4

Je pense que vous pourriez probablement résoudre cela du côté du client seul.

Sur la base de la réponse de Jaspers, vous pouvez faire:

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

fonds marcottage également à l'aide de CSS que vous pourriez faire:

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

La dernière solution suppose que vous n'avez pas de transparence dans votre image générée.

Answer 5

Une autre alternative du côté client est de faire:

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