¿Reemplazar imágenes no disponibles a través de CSS?

Question

¿Es posible reemplazar la imagen estándar rota por CSS o usando otra técnica? Todas mis imágenes son del mismo tamaño y mi transparencia.

He tratado de envolver todas las imágenes con el fondo de un div:

<div class="no_broken"> 
    <img src="http://www.web.com/found.gif"/> 
</div> 

<div class="no_broken"> 
    <img src="http://www.web.com/notfound.gif"/> 
</div> 

CSS:

div.no_broken { 
    background-image: url(standard.gif); 
} 

div.no_broken, div.no_broken img { 
    width: 32px; 
    height: 32px; 
    display: block; 
} 

Pero esto va a mostrar dos imágenes una encima de la otra si el IMG es transparente.

Answer 1

Esto funciona sin CSS:

<img src="some.jpg" onerror="this.src='alternative.jpg';"> 

Parece que funciona incluso cuando Javascript está desactivado.

Answer 2

Hasta donde yo sé, no hay ninguna propiedad de CSS que controle la visualización de imágenes rotas. Tal vez hay propiedades específicas del navegador? Puede que tenga que recurrir a Javascript para repetir las imágenes en la página y reemplazar su src si están rotas.

Answer 3

No sé qué tecnología está utilizando, pero en ASP.net hay algo llamado adaptadores de control.

Lo he usado para capturar el PreRender de todas las imágenes y reemplazar el imageurl si el imageurl no está completo.

No sé si esto se relaciona en absoluto con su situación y ciertamente no funcionará cuando haya un camino pero no una imagen en el camino.

Answer 4

Este código es JavaScript y solo funcionará cuando JS esté habilitado. Extrañamente, esto también funciona si en IE si se accede al archivo desde una máquina local (con el archivo: ///). Cuando se accede a la página con http, no funcionará sin JS.

Answer 5

Si desea agregar algo de javascript en la mezcla, esto debería funcionar bien con jQuery para detectar errores de imagen y agregar algún tipo de estado de error de la clase CSS a las imágenes rotas.

$(document).ready(function() { 
    $('.no_broken img').error(function() { 
     $(this).addClass('broken'); 
    }); 
}); 

Y luego, en el CSS que podría tener algo como

div.no_broken, div.no_broken img { 
    width: 32px; 
    height: 32px; 
    display: block; 
} 

div.no_broken img.broken { 
    background-image: url(standard.gif); 
    content:""; 
} 

Answer 6

Pensé en empaquetar el comentario de kmoser en una respuesta. Limpiar el controlador onerror es una buena idea ya que los bucles son posibles.

Javascript

function epic(c) { 
    c.onerror=''; 
    c.src='alternative.jpg'; 
}; 

HTML

<img src='some.jpg' onerror='epic(this)'> 

Dejamos esta función épica en todas nuestras etiquetas de imagen ahora en twiends, como tiramos en un montón de imágenes de perfil sociales que todos expiran en algún momento de el futuro.