web-dev-qa-db-fra.com

masquer la balise img si src est vide mais sans javascript / jQuery ou css3

Je conçois des modèles dans Channel Advisor pour la boutique eBay et cela ne permet pas javascript/jQuery. Également CSS3 ne fonctionne pas dans les différentes versions de IE, en particulier la img[src=] l'implémentation est interrompue.

Lorsque j'utilise des balises de modèle en img comme:

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

où {{THUMB (ITEMIMAGEURL1)}} est le chemin de l'image, si l'image est manquante et que le modèle est publié sur eBay, le résultat final serait le suivant:

<img src=""/>

et cela montre une image cassée.

Existe-t-il un moyen de masquer <img src=""/> avec HTML ou CSS qui fonctionne dans IE7 +

htmlcssimagecss-selectors
30
user2793981

Vous pouvez utiliser [attr=val] sélecteur

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

Le sélecteur ci-dessus correspondra simplement si l'attribut src n'a pas de valeur. Ce sélecteur est général et fera correspondre toutes les balises img du document avec un src vide, si vous souhaitez en cibler des spécifiques, plutôt que d'utiliser un sélecteur plus spécifique comme

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

Demo

Démo  (Sans le sélecteur ci-dessus, voyez cette ligne rouge?)

Alternativement, si vous souhaitez réserver l'espace occupé par la balise img, vous pouvez utiliser visibility: hidden; au lieu de display: none; comme display: none; gâchera simplement votre mise en page où visibility: hidden; réservera l'espace, il masquera simplement le img

Voyez la différence entre display: none; et visibility: hidden;

Demo (visibility: hidden;, réserve d'espace)

Demo 2 (display: none;, ne réserve pas d'espace)

Remarque: Aucun des sélecteurs ci-dessus n'enlèvera la balise img du DOM, il la masquera simplement de l'extrémité avant

80
Mr. Alien

[attr=value] le sélecteur est CSS2, ça devrait aller.

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