style - Cómo ocultar la imagen del icono roto utilizando solo CSS/HTML(sin js)
ocultar elementos html (13)
¿Cómo puedo ocultar el ícono de la imagen rota? Ejemplo :
Tengo una imagen con error src:
<img src="Error.src"/>
La solución debe funcionar en todos los navegadores.
Usando solo CSS o HTML, no JS.
A pesar de lo que dice la gente aquí, no necesitas JavaScript, ¡ni siquiera necesitas CSS!
En realidad es muy factible y simple solo con HTML. Incluso puede mostrar una imagen predeterminada si una imagen no se carga . Así es cómo...
Esto también funciona en todos los navegadores, incluso desde IE8 (de los más de 250,000 visitantes a sitios que alojé en septiembre de 2015, ZERO personas usaron algo peor que IE8, lo que significa que esta solución funciona literalmente para todo ).
Paso 1: referencia la imagen como un objeto en lugar de un img . Cuando los objetos fallan no muestran iconos rotos; simplemente no hacen nada. Comenzando con IE8, puede usar las etiquetas Objeto e Img indistintamente. Puede cambiar el tamaño y hacer todo lo glorioso que pueda con imágenes regulares también. No tengas miedo de la etiqueta del objeto; es solo una etiqueta, nada grande y voluminoso se carga y no ralentiza nada. Solo usarás la etiqueta img con otro nombre. Una prueba de velocidad muestra que se usan de forma idéntica.
Paso 2: (Opcional, pero impresionante) Pegue una imagen predeterminada dentro de ese objeto. Si la imagen que desea realmente se carga en el objeto , la imagen predeterminada no se mostrará. Entonces, por ejemplo, podría mostrar una lista de avatares de usuario, y si alguien aún no tiene una imagen en el servidor, podría mostrar la imagen del marcador de posición ... no se requiere javascript o CSS, pero se obtienen las características de toma la mayoría de las personas JavaScript.
Aquí está el código ...
<object data="avatar.jpg" type="image/jpg">
<img src="default.jpg" />
</object>
... Sí, es así de simple.
Si desea implementar imágenes predeterminadas con CSS, puede hacerlo aún más simple en su HTML así ...
<object class="avatar" data="user21.jpg" type="image/jpg"></object>
... y simplemente agrega el CSS de esta respuesta -> https://.com/a/32928240/3196360
Creo que la manera más fácil es ocultar el ícono de imagen roto por la propiedad de sangría de texto.
img {
text-indent: -10000px
}
De manera obvia, no funciona si quieres ver el atributo "alt".
Encontré una gran solución en https://bitsofco.de/styling-broken-images/
img {
position: relative;
}
/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
font-family: ''Helvetica'';
font-weight: 300;
line-height: 2;
text-align: center;
content: attr(alt);
}
<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">
Las imágenes que faltan simplemente no mostrarán nada, o mostrarán un [? ] caja de estilo cuando no se puede encontrar su fuente. En su lugar, es posible que desee reemplazarlo con un gráfico de "imagen faltante" que esté seguro de que existe, por lo que hay una mejor respuesta visual de que algo está mal. O bien, es posible que desee ocultarlo por completo. Esto es posible porque las imágenes que un navegador no puede encontrar generan un evento de "error" de JavaScript que podemos observar.
//Replace source
$(''img'').error(function(){
$(this).attr(''src'', ''missing.png'');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
Además, es posible que desee activar algún tipo de acción Ajax para enviar un correo electrónico a un administrador del sitio cuando esto ocurra.
Me gustó la answer de Nick y estaba jugando con esta solución. Encontrado un método más limpio. Dado que :: before / :: after pseudos no funcionan en elementos reemplazados como img y object, solo funcionarán si los datos del objeto (src) no están cargados. Mantiene el HTML más limpio y solo agregará el pseudo si el objeto no se carga.
http://codepen.io/anon/pen/xwqJKQ
<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>
<object data="http://broken.img/url" type="image/png"></object>
object {
position: relative;
float: left;
display: block;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid black;
&::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '''';
background: red url(''http://placehold.it/200x200'');
}
}
No hay forma de que CSS / HTML sepa si la imagen está rota, así que vas a tener que usar JavaScript sin importar qué
Pero aquí hay un método mínimo para ocultar la imagen o reemplazar la fuente con una copia de seguridad.
<img src="Error.src" onerror="this.style.display=''none''"/>
o
<img src="Error.src" onerror="this.src=''fallback-img.jpg''"/>
Actualizar
Puede aplicar esta lógica a varias imágenes a la vez haciendo algo como esto:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll(''img'').forEach(function(img){
img.onerror = function(){this.style.display=''none'';};
})
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">
Actualización 2
Para una opción de CSS, vea la respuesta de michalzuber a continuación. No puedes ocultar toda la imagen, pero cambias el aspecto del icono roto.
Para los futuros usuarios de Google, en 2016 hay una forma CSS segura y segura de ocultar imágenes vacías utilizando el selector de atributos:
img[src="Error.src"] {
display: none;
}
Puedes seguir este camino como una solución CSS
img {
width:200px;
height:200px;
position:relative
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background: #ebebeb url(''http://via.placeholder.com/300?text=PlaceHolder'') no-repeat center;
color: transparent;
}
<img src="gdfgd.jpg">
Si aún necesita tener el contenedor de imágenes visible debido a que se rellena más tarde y no desea molestarse en mostrarlo y ocultarlo, puede pegar una imagen transparente de 1x1 dentro del src:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Lo usé para este propósito exacto. Tenía un contenedor de imágenes que iba a tener una imagen cargada en él a través de Ajax. Como la imagen era grande y tardaba un poco en cargarse, se requería establecer una imagen de fondo en CSS de una barra de carga de Gif.
Sin embargo, debido a que el src del estaba vacío, el ícono de la imagen rota aún apareció en los navegadores que lo usan.
Configurar el GIF 1x1 transparente soluciona este problema de manera simple y efectiva sin adiciones de código a través de CSS o JavaScript.
Una forma básica y muy simple de hacer esto sin ningún código requerido sería simplemente proporcionar una declaración alt vacía. El navegador devolverá la imagen en blanco. Se vería como si la imagen no estuviera allí.
Ejemplo:
<img class="img_gal" alt="" src="awesome.jpg">
Pruébalo para ver! ;)
Usa la etiqueta de objeto. Agregue texto alternativo entre las etiquetas como esta:
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
Usar CSS solo es difícil, pero podrías usar la background-image de background-image de CSS en lugar de las etiquetas <img> ...
Algo como esto:
HTML
<div id="image"></div>
CSS
#image {
background-image: url(Error.src);
width: //width of image;
height: //height of image;
}
Aquí hay un violín funcional: http://jsfiddle.net/xbK6g/
Nota: Agregué el borde en el CSS en el violín solo para demostrar dónde estaría la imagen.
en el caso de que desee mantener / necesite la imagen como marcador de posición, puede cambiar la opacidad a 0 con onerror y algo de css para establecer el tamaño de la imagen. De esta manera, no verá el enlace roto, pero la página se carga de forma normal.
<img src="<your-image-link->" onerror="this.style.opacity=''0''" />
.img {
width: 75px;
height: 100px;
}