2009-11-08 24 views
6

En firefox, una imagen rota aparece como un espacio en blanco en blanco. Sobre un fondo blanco no hay forma de distinguir entre ninguna imagen y una imagen rota. Esto hace que la identificación de imágenes rotas sea difícil de reconocer y hace que no se corrija.Firefox muestra imágenes rotas

¿Cómo hago para que las imágenes rotas produzcan una X como lo hacen en Internet Explorer?

Respuesta

18

Sé que esta pregunta se hizo hace un tiempo pero me escribió una entrada de blog sobre este tema hace un tiempo y pensé que podría valer la pena adding a link por si alguien cae a través de ella.

Edición 12/09/2013:

KatieK hizo un buen punto por debajo de la adición de la información directamente en la respuesta, aquí están los pasos necesarios para conseguir este trabajo, sigue siendo relevante en la última nightly build a Dic 2013 (v28a2)

1) escribir about: config en la barra de direcciones y aceptar la advertencia

2) buscar browser.display.show_image_placeholders y se puso a cierto

3) buscar su carpeta de perfil Fx para UserContent-example.css y cambiarle el nombre a userContent.css(si existe el imposible de archivo de ejemplo que sólo puede crearlo)

4) agregue el siguiente css a su UserContent.css y reiniciar Firefox

/* Enable image placeholders */ 
@-moz-document url-prefix(http), url-prefix(file) { 
    img:-moz-broken{ 
    -moz-force-broken-image-icon:1; 
    width:24px; 
    height:24px; 
    } 
} 
+0

¡Esta es la respuesta! Ahora puedo encontrar las imágenes rotas. ¡Gracias! –

+1

Creé un archivo "UserContent.css" en mi carpeta de perfil, pero no funcionó. Descubrí que necesitaba crear una carpeta "cromo" en mi carpeta de perfil y poner allí el archivo "UserContent.css". Después de eso, funcionó. –

+1

¿hay alguna forma de mostrar aún el texto alternativo junto al ícono roto? – endolith

0

Una mejor solución podría ser captar las solicitudes de imágenes que arrojen un error 404 No encontrado.

En Firefox puedes usar Firebug para ver todas las solicitudes HTTP que realiza tu navegador. Cualquier archivo que falte se mostrará en rojo en la lista. Para lograr lo mismo en Internet Explorer podría usar la herramienta Fiddler de Microsoft.

3

Mejor aún, agarre el Web Developer Toolbar del sitio de Complementos de Mozilla. Una vez que lo instales, simplemente ve a Imágenes> Buscar imágenes rotas.

+1

Ya tengo la barra de herramientas de desarrollador web, y esto funciona, pero estaba buscando una solución que haga obvio que las imágenes se rompen en lugar de tener que elegir explícitamente una opción de menú. Quiero que se me resalten las imágenes rotas, en lugar de tener que solicitar algo. – reach4thelasers

2

Todas las soluciones dadas funcionan bien. Solo hay otra situación donde las imágenes se romperán y una solución diferente.

Tiene un enlace de imágenes. No tiene control sobre las imágenes que eventualmente devolverán un 404 y desean mostrar algo al usuario. Que puede evitar con css y con el ancho/alto correcto de la imagen en pantalla.

// html code 
<img class="external" src="http://externalserver.com/image.jpeg" width="300" height="200" /> 

// css 
.external { 
    background: url(path-to-file); 
    -moz-force-broken-image-icon: 1; /* to make FF show the image */ 
} 

Y su archivo de fondo tiene una cruz o un texto que indica que la imagen ya no está disponible. Solo un pensamiento.

Espero que ayude.

+0

Firefox ignora el ancho y el alto si la imagen está rota; en su lugar, mostrará el texto en la etiqueta Alt. –

+0

@ user961333 true ... en FF tienes que usar '-moz-force-broken-image-icon: 1'. Puede hacerlo en todo el sitio o para imágenes específicas. Respuesta actualizada en consecuencia. Thks. – Frankie

Cuestiones relacionadas