CSS: La imagen no se encuentra

Por defecto, en Firefox, cuando una imagen no se encuentra no pasa nada, el espacio que debería ocupar no se muestra. En Internet Explorer y Chrome, por ejemplo, esto es diferente, si la imagen no pudo ser cargada, se muestra un ícono y, eventualmente, el texto del atributo ALT.

Según Mozilla, si la imagen tiene definidos un ancho y un alto, deberíamos ver un ícono pero, eso no ocurre siempre. También dicen que hay una propiedad que controla eso, llamada -moz-force-broken-image-icon; un valor de 1 forzaría a que se muestre ese ícono y tampoco veo que funcione en todos los casos.

Lo que suele ocurrir son cosas así:

En este es un ejemplo: <img src="nada.jpg" alt="" /> como esa imagen no existe, en Firefox no vemos nada a menos que le pongamos el atributo ALT, en cuyo caso, lo que veremos será el texto de ese atributo:

<img src="nada.jpg" alt="aqui deberia verse la imagen" />

Con CSS, hay algunas particularidades de los navegadores de Mozilla que podemos utilizar para cambiar esto.

El pseudo-elemento -moz-broken nos permite agregar propiedades que se aplicarán a las imágenes que no puedan ser cargadas; por ejemplo, podríamos agregarles un borde y un color:

img:-moz-broken { border: 1px solid red; color: red }

Este es el mismo ejemplo anterior, una imagen sin el atributo ALT:

y este con el atributo ALT

esta imagen, en cambio existe:

Lo mismo, podría hacerse con casi cualquier otra propiedad, por ejemplo, una imagen de fondo alternativa o podríamos crear dos definiciones, una para las imágenes en general:

img:-moz-broken { color:#C6211A; font-family: Tahoma; font-weight: bold; }

y otra para las imágens que no tengan el atributo ALT:

img[alt=""]:-moz-broken:after {
  background: transparent url(URL_imagen) no-repeat 0 0;
  content: "error" !important;
  padding-left :20px;
  text-decoration: blink;
}

Estos son los mismos dos ejemplos anteriores: