html - atributos - img sports

ocultar img tag si src está vacío pero sin javascript/jQuery o css3

Question

Estoy diseñando plantillas en Channel Advisor para la tienda eBay y no permite javascript/jQuery . Además, el CSS3 no funciona en varias versiones de IE , especialmente la implementación img[src=] está rota.

Cuando utilizo etiquetas de plantilla en img como:

<img src="{{THUMB(ITEMIMAGEURL1)}}"/> 

donde {{THUMB (ITEMIMAGEURL1)}} es la ruta de la imagen, si falta la imagen y la plantilla se publica en eBay, el resultado final sería así:

<img src=""/> 

y esto muestra una imagen rota.

¿Hay alguna manera de ocultar <img src=""/> con HTML o CSS que funciona en IE7 +

Answer 1

Puedes usar el selector [attr=val]

img[src=""] {
   display: none;
}

El selector anterior simplemente coincidirá, si el atributo src no tiene valor. Este selector es general y hará coincidir todas las etiquetas img en el documento con un src vacío, si desea apuntar a etiquetas específicas, luego use un selector más específico como

.class_name img[src=""] {
    display: none;
}

Demo

Demo (¿Sin el selector de arriba, ve esa línea roja?)

Alternativamente, si desea reservar el espacio que img etiqueta img , puede usar la visibility: hidden; en lugar de display: none; como display: none; simplemente ensuciará su diseño donde la visibility: hidden; reservará el espacio, solo ocultará el img

Vea la diferencia entre display: none; y visibility: hidden;

Demo ( visibility: hidden; reserva espacio)

Demo 2 ( display: none; no se reserva espacio)

Nota: ninguno de los selectores anteriores REMOVERÁ la etiqueta img del DOM, simplemente la ocultará del extremo frontal

Answer 2

[attr=value] selector es CSS2, deberías estar bien.

img[src=""] {
  display:none;
}