¿La mejor manera de mostrar la imagen predeterminada si no se encuentra el archivo de imagen especificado?

Question

Tengo su aplicación de comercio electrónico promedio, almaceno ITEM_IMAGE_NAME en la base de datos, y en ocasiones los gerentes MISSPELL el nombre de la imagen.

Para evitar "imágenes faltantes" (X roja en IE), cada vez que visualizo la lista de productos, verifico en el servidor la imagen relacionada con el producto, y si ese archivo no existe, lo reemplazo con imagen predeterminada.

Por lo que puedo decir esto no afecta el rendimiento, pero me preguntaba si hay alguna alternativa para solucionar un problema de "falta de imagen".

estoy usando ASP.NET + C# (.NET 3,5)

Algunos código:

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

Answer 1

usted podría considerar algo con javascript

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

Editar: o programa un 404.aspx que devuelve una imagen predeterminada, si se solicitó una imagen no existente.

Answer 2

Puede especificar en el servidor qué imagen debe devolverse para todas las solicitudes a archivos de imágenes no existentes. De esta forma, el usuario puede obtener un lolcat "2 AWESUM 2 SHO" en lugar de una x roja.

Answer 3

Creo que su camino está bastante bien. Lo haría en una función o lo haría en accesor de .categoryImage.

Answer 4

Creo que encontraría la manera de hacer que los datos sean consistentes en lugar de permitir que los usuarios ingresen datos inconsistentes. Tal vez su aplicación de administración podría permitirle al administrador seleccionar una imagen existente o cargar una nueva, luego establecer el nombre de la imagen en base a esta entrada para que tenga la seguridad de que la imagen existirá. Solo elimine una imagen cuando todas las referencias a ella hayan sido eliminadas de la base de datos. Restrinja la interacción con los datos a su aplicación para que las personas no puedan cometer ese tipo de errores.

Otra forma de manejar esto sería tener un controlador (o un controlador en ASP.NET MVC) que realice la búsqueda de imágenes en función del ID y devuelva los datos de la imagen. Junto con el almacenamiento en caché, esto podría ser muy eficiente y también le permitiría reemplazar la imagen.

Answer 5

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

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

Si missing.png cargas, cubrirá el espacio asignado para ello, como si el repliegue no se especificaron. (Suponiendo que no es transparente.)

Si missing.png no se carga, el espacio se llenará con fallback.png. Todavía obtendrás un pequeño ícono de "imagen rota", pero lo prefiero de esa manera ... un pequeño indicio que dice "corrígeme".

Si sus imágenes no son todas del mismo tamaño, notará que las fichas de fondo están predeterminadas. Puede usar background-repeat: no-repeat; si no le gusta.

Answer 6

Me gusta la solución de Erik, pero sin eliminar el evento después de la primera ejecución, porque si está usando ese código en, digamos, una vista parcial de MVC, esto solo funcionará la primera vez que se carga.Así que me gustaría ir con:

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

En caso de que tenga muchas imágenes en la misma situación, como una cuadrícula, puede hacer esto en su lugar:

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

Por supuesto, es posible que desee usa un selector jQuery más específico.