Meilleure façon d'afficher l'image par défaut si le fichier image spécifié est introuvable?

Question

J'ai votre application e-commerce moyenne, je stocke ITEM_IMAGE_NAME dans la base de données, et parfois les gestionnaires MISSPELL le nom de l'image. Pour éviter les "images manquantes" (X rouge dans IE), chaque fois que j'affiche la liste des produits, je vérifie le serveur pour l'image liée au produit, et si ce fichier n'existe pas - je le remplace avec l'image par défaut. Dans la mesure où je peux dire cela n'affecte pas les performances, mais je me demandais s'il y a des solutions de rechange pour résoudre un problème "image manquante".

J'utilise ASP.NET + C# (.NET 3.5)

Certains 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

Vous pourriez envisager quelque chose avec javascript

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

Edit: Ou programme un 404.aspx renvoyant une image par défaut, si une image inexistante a été demandée.

Answer 2

Vous pouvez spécifier sur le serveur quelle image doit être retournée pour toutes les demandes de fichiers image inexistants. De cette façon, l'utilisateur peut obtenir un lolcat "2 AWESUM 2 SHO" au lieu d'un x rouge.

Answer 3

Je pense que votre chemin est à peu près OK. Je le ferais dans une fonction ou dans l'accesseur .categoryImage.

Answer 4

Je pense que je trouverais un moyen de rendre les données cohérentes plutôt que de permettre aux utilisateurs d'entrer des données incohérentes. Peut-être que votre application de gestion pourrait permettre au gestionnaire de sélectionner une image existante ou en télécharger une nouvelle, puis définir le nom de l'image en fonction de cette entrée afin que vous soyez assuré que l'image existera. Ne supprime une image que lorsque toutes les références à celle-ci ont été supprimées de la base de données. Restreindre l'interaction avec les données à votre application afin que les gens ne peuvent pas faire ce genre d'erreurs. Une autre façon de gérer cela serait d'avoir un gestionnaire (ou un contrôleur dans ASP.NET MVC) qui fait la recherche d'image basée sur ID et renvoie les données d'image. Couplé avec la mise en cache, cela pourrait être très efficace et vous permettrait également de faire du remplacement d'image.

Answer 5

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

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

Si missing.png charges, il couvrira l'espace alloué pour elle, comme si le repli n'a pas été spécifié. (En supposant que ce n'est pas transparent.)

Si missing.png ne parvient pas à charger, l'espace sera rempli avec fallback.png. Vous aurez toujours une petite icône "image brisée", mais je la préfère de cette façon ... un petit indice qui dit "corrige moi".

Si vos images ne sont pas toutes de la même taille, vous remarquerez que les carreaux d'arrière-plan par défaut. Vous pouvez utiliser background-repeat: no-repeat; si vous n'aimez pas cela.

Answer 6

J'aime la solution d'Erik, mais sans enlever l'événement après la première exécution, parce que si vous utilisez ce code dans, disons, une vue partielle MVC, cela ne fonctionnera que la première fois qu'il est chargé.Donc, je partirais avec:

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

Si vous avez beaucoup d'images dans la même situation, comme une grille, vous pouvez le faire à la place:

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

Bien sûr, vous voudrez peut-être utilisez un sélecteur jQuery plus spécifique.