Marcador de posición de la imagen

He definido la etiqueta de la imagen con un color de fondo para que, si no hay una imagen, el color se muestre pero el ícono de la imagen rota muestra cómo eliminarlo.Marcador de posición de la imagen

No quiero hacer que la página sea voluminosa al agregar jquery o cualquier marco, tampoco puedo agregar ningún tipo de divs a las imágenes porque el sitio está casi hecho.

encontrado la respuesta con JavaScript

function ImgError(source){ 
source.src = "/images/noimage.gif"; 
source.onerror = ""; 
return true; 
} 

<img src="someimage.png" onerror="ImgError(this);"/>

Fuente

2012-01-24 Pradyumna Challa

Puede asignar el atributo 'alt' p. ' my cute cat ' luego aparecerá el texto alternativo con el color de fondo que ha aplicado. –

puede ocultar que el uso siguiente:

<img 
    src="my.png" 
    onerror="this.style.display='none'" 
/>

Puede mostrar otra imagen si la imagen no se encuentra de la siguiente manera:

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

Fuente

2012-01-24 13:17:23

Sugeriría visibilidad: oculto en lugar de mostrar: ninguno si no desea que afecte el diseño. Además, tenga en cuenta mi punto acerca de cómo envolverlo en un div si necesita tener una pantalla de color de fondo cuando la imagen no se carga. –

@NickLockwood eso también es una forma –

no puedo agregar nada manualmente a las etiquetas de imagen hay muchas etiquetas en todo el sitio. –

Es un comportamiento dependiente del navegador, pero no puedes hacer nada al respecto. Aquí hay un par de opciones:

1) Use JavaScript para agregar un manejador de onerror a la imagen que lo oculta cuando no se carga por configuración a oculto usando css (necesitará tener un div que contenga para aplicar el color de fondo como color de fondo no se mostrará si la imagen está en HDD).

Para aplicar un controlador de errores a cada imagen en el sitio sin jQuery y sin modificar el código, puede hacer esto (poner esto en un script al final de la página; no funcionará si está en el <head> y no puede ponerlo en la ventana. onload o no se disparará antes de que las imágenes se hayan cargado).

var images = document.getElementsByTagName('img'); 
for (i = 0; i < images.length; i++) { 
    images[i].onerror = function() { 
     this.style.visibility = 'hidden'; 
    } 
}

2) Establecer la imagen como imagen de fondo css en un div en lugar de utilizar una etiqueta <img>. No es tan semántico, pero no mostrará un ícono de imagen roto si no se carga, y aún puede especificar un color de fondo y una etiqueta (no una etiqueta alt).

Fuente

2012-01-24 13:17:33

Es una característica de algunos navegadores: por lo que recuerdo, Firefox, Chrome y Safari no muestran nada mientras Internet Explorer muestra un ícono de imagen rota. A menos que use Javascript, no creo que pueda anular este comportamiento.

Fuente

2012-01-24 13:18:09 MassivePenguin

Al menos en FF, puede forzar el ícono con 'img: -moz-broken {-moz-force-broken-image-icon: 1;}' –

El navegador muestra el icono de la imagen rota. No es algo que puedas cambiar dentro del código. Creo que encontrará que los diferentes navegadores manejan las imágenes que faltan de manera diferente.

Lo que se quiere hacer podría ser manejado de manera diferente, aunque ...

Estilo:

div.image-maybe-missing { 
    width: 300px; 
    height: 450px; 
    background-color: red; 
    background-image: url("/images/is-it-there.png"); 
}

HTML:

<div class="image-maybe-missing"> 
</div>

Esto le dará una caja vacía con un fondo rojo si la imagen no está presente. El ancho y la altura del div deben coincidir con el ancho y alto de la imagen.

Fuente

2012-01-24 13:24:37

Pero IE aún mostrará una "X" roja cuando la imagen original no se encuentra. – acme

Una solución simple sería utilizar, literalmente, una imagen en blanco de marcador de posición. Esto generalmente se usa para sprites, pero creo que podrías usar esto también.

Lo que hace es crear una imagen gif en blanco de 1x1 px con transparencia activada, dirigir el atributo "src" al espacio en blanco.gif y dar las imágenes a través de la propiedad de la imagen de fondo css. Por lo tanto, incluso si no se encuentra la imagen de fondo, no se mostrará la imagen del enlace roto.

Fuente

2012-01-24 14:19:50 Ege

Debe tener en cuenta que hay un inconveniente menor en esto. La imagen extra solicitada por supuesto. Puede aprovechar esto utilizando sprites siempre que sea posible, disminuyendo así la cantidad total de solicitudes de imágenes. – Ege

Crearía una representación base64 de 1px por 1px y la almacenaría en JavaScript. Esto eliminaría la solicitud de red. Las imágenes de Base64 son un poco menos eficientes, pero a 1px por 1px no importará. Además, si usas un sprite, puedes elegir 1 píxel que quieras usar, ya que se descarga de todos modos si vas por esa ruta. Publiqué esto como respuesta a continuación. –

solución con 1x1 png vacío

 function ImgError(source){ 
      empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII="; 
      source.src = "data:image/png;base64," + empty1x1png; 
      source.onerror = ""; 
      return true; 
     } 

     <img src="someimage.png" onerror="ImgError(this);"/>

Fuente

2013-02-11 19:08:44

Trate this.remove() para eliminar el marcador de imagen rota:

<div class="cell"> 
    <p> 
    <img src="pic.png" onerror="this.remove();" /> 
    </p> 
</div>

Yo uso divs celulares para conservar el diseño.

Fuente

2017-08-10 13:50:08 MannyC

Respuesta

Cuestiones relacionadas