¿Es posible mostrar una imagen alternativa si no se encuentra el archivo original? Me gustaría lograr esto solo con css y html, sin javascript (o jQuery y similares). La idea es mostrar una imagen en lugar de la prueba "alt" o cruz predeterminada (fea) de IE. Si no es posible sin javascript, entonces comprobaré el img src con php con un if-then-else básico.Mostrar imagen alternativa
Usted puede hacer esto mediante la propiedad Imagen de fondo de CSS del elemento img, es decir
img
{
background-image:url('default.png');
}
Sin embargo, usted tiene que dar una anchura o altura para que esto funcione (cuando la img-src no es encontrado):
img
{
background-image:url('default.png');
width:400px;
}
<object data="foobar.png" width=200 height=200>
<img src="test.png" alt="Just testing.">
</object>
Aquí foobar.png es la imagen primaria, test.png es la imagen de respaldo. Por la semántica del elemento object, el contenido del elemento (en este caso el elemento img) se dictarán si y sólo si no se pueden utilizar los datos primarios (especificado por el atributo data).
Aunque los navegadores han tenido errores terribles en las implementaciones de object en el último año, esta técnica simple parece funcionar en las versiones modernas de IE, Firefox, Chrome.
Caso de prueba: http://jsfiddle.net/VkrJ4/1/ Aceptar en * W7Pro x64 * con Fx 12.0, IE9, Saf 5.1.5 y Op 11.64. No probado con Chrome/Chromium. No probado con lectores de pantalla y otros AT por el momento (la pregunta es: "¿NVDA, JAWS, VoiceOver, ORCA, etc. leen el texto @alt a sus usuarios?") – FelipeAls
muy simple y mejor manera de lograr esto con poco código
<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg">
Para mí lo anterior funciona perfecto!
Un fragmento muy útil que resuelve el problema con elegancia. Sin embargo, OP pidió explícitamente * "para lograr esto solo con css y html, no javascript" * – domsson
Además, ¿no debería ser 'onerror =" this.src = 'img/undefined.jpg'; "'? Además, vea esta pregunta para un posible bucle infinito y cómo prevenirlo: http://stackoverflow.com/questions/8124866/how-does-one-use-the-onerror-attribute-of-an-img-element – domsson
¿Funcionó cuando lo probó? En mi Firefox, el fondo no se muestra cuando falta la imagen real. En mi IE, se muestra el fondo, pero también lo está el texto alternativo o el "×" rojo en un recuadro. –
Ya seleccioné el aswer pero aún tengo una pregunta: ¿qué quiere decir con "tiene que dar un ancho o alto para que esto funcione (cuando no se encuentra img-src)"? Si mi etiqueta img ya tiene ancho y alto, ¿eso también se usará en la imagen de fondo? – rodedo
Sí, creo que debería funcionar. – emrea