Quel est le moyen valable pour inclure une image sans src?
J'ai une image que je peuplerai dynamiquement avec un src plus tard avec javascript, mais pour faciliter, je veux que la balise image existe dans pageload mais ne montre rien. Je sais que <img src='' /> est invalide alors quel est le meilleur moyen de le faire?
Bien qu’il n’existe aucun moyen valide d’omettre la source d’une image, il existe sont des sources qui ne provoqueront pas de hits du serveur. J'ai récemment eu un problème similaire avec iframes et j'ai déterminé que //:0 était la meilleure option. Pas vraiment!
En commençant par // (en omettant le protocole), le protocole de la page en cours est utilisé, ce qui empêche les avertissements de "contenu non sécurisé" dans les pages HTTPS. Ignorer le nom d'hôte n'est pas nécessaire, mais le raccourcit. Enfin, un port de :0 garantit qu'une requête de serveur ne peut pas être effectuée (ce n'est pas un port valide, conformément à la spécification).
C’est la seule URL que j’ai trouvée qui ne provoque pas de hits sur le serveur ni de messages d’erreur dans aucun navigateur. Le choix habituel - javascript:void(0) - provoquera un avertissement "contenu non sécurisé" dans IE7 s'il est utilisé sur une page servie via HTTPS. Tout autre port a entraîné une tentative de connexion au serveur, même pour des adresses non valides. (Certains navigateurs font simplement la demande invalide et attendent qu’ils expirent.)
Cela a été testé dans Chrome, Safari 5, FF 3.6 et IE 6/7/8, mais je m'attendrais à ce que cela fonctionne dans n'importe quel navigateur, car ce devrait être la couche réseau qui tue toute tentative de requête.
Une autre option consiste à intégrer une image vierge. Toute image qui convient à vos besoins fera l'affaire, mais l'exemple suivant code un GIF de seulement 26 octets - de http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever =
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
Modifier en fonction du commentaire ci-dessous:
Bien entendu, vous devez prendre en compte les besoins de votre navigateur en termes de support. Aucun support pour IE7 ou moins n'est notable. http://caniuse.com/datauri
Je recommande d'ajouter les éléments de manière dynamique, et si vous utilisez jQuery ou une autre bibliothèque JavaScript, c'est assez simple:
regardez aussi prepend et append. Sinon, si vous avez une balise d'image de ce type et que vous souhaitez la valider, vous pouvez envisager d'utiliser une image factice, telle qu'un gif ou un png transparent de 1 pixels.
Je ne l'ai pas fait depuis un moment, mais j'ai dû refaire la même chose une fois.
<img src="about:blank" alt="" />
Est-ce que mon préféré - le //:0 implique que vous essayez d'établir une connexion HTTP/HTTPS avec le serveur Origin sur le port zéro (le port tcpmux?) - ce qui est probablement inoffensif, mais je préfère ne pas le faire de toute façon. Heck, le navigateur peut voir le port zéro et même ne pas envoyer de requête. Mais je préférerais toujours que ce ne soit pas spécifié de la sorte, alors que ce n'est probablement pas ce que vous voulez dire.
Quoi qu'il en soit, le rendu de about:blank est en réalité très rapide sur tous les navigateurs que j'ai testés. Je l'ai simplement jeté dans le validateur du W3C et il ne s'est pas plaint, il pourrait même être valide.
Edit : Ne faites pas ça; cela ne fonctionne pas sur tous les navigateurs (il y aura une icône 'image brisée' comme indiqué dans les commentaires pour cette réponse). Utilisez la solution <img src='data:... ci-dessous. Ou si vous ne vous souciez pas de la validité, mais que vous voulez tout de même éviter les requêtes superflues adressées à votre serveur, vous pouvez utiliser <img alt="" /> sans attribut src. Mais c’est INVALIDE HTML, c’est donc prudent.
Page de test montrant un tas de méthodes différentes: http://desk.nu/blank_image.php - servi avec toutes sortes de doctypes et de types de contenu différents. - comme mentionné dans les commentaires ci-dessous, utilisez la nouvelle page de test de Mark Ormston à l'adresse suivante: http://memso.com/Test/BlankImage.html
Comme écrit dans les commentaires, cette méthode est fausse.
Je n'avais pas trouvé cette réponse auparavant, mais selon W3 Specs valide vide src tag serait un lien d'ancrage #.
Exemple: src="#", src="#empty"
La page est validée avec succès et aucune demande supplémentaire n'est faite.
si vous conservez l'attribut src, le navigateur enverra une requête à l'URL de la page en cours. Ajoutez toujours 1 * 1 transparent img dans l'attribut src si vous ne voulez pas d'URL.
src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="
J'ai trouvé cela en utilisant:
<img src="file://null">
ne fera pas une demande et valide correctement.
Les navigateurs vont simplement bloquer l'accès au système de fichiers local.
Toutefois, une erreur peut s'afficher dans le journal de la console sous Chrome, par exemple:
Not allowed to load local resource: file://null/
J'ai trouvé que le simple fait de définir le src sur une chaîne vide et d'ajouter une règle à votre CSS pour masquer l'icône de l'image brisée fonctionne très bien.
[src=''] {
visibility: hidden;
}
Utilisez un SVG vraiment vierge, valide et hautement compatible, basé sur ceci article :
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"
Sa taille par défaut sera 300x150px, comme tout SVG, mais vous pouvez l'utiliser avec vos styles par défaut d'élément img, comme vous en auriez peut-être besoin de toute façon dans l'implémentation pratique.
En me basant sur la réponse de Ben Blank, la seule façon pour moi de valider cette validation dans le validateur w3 était la suivante:
<img src="/./.:0" alt="">`
<img src="invis.gif" />
Où invis.gif est un seul pixel transparent gif. Cela ne cassera pas dans les futures versions de navigateur et a fonctionné dans les navigateurs traditionnels depuis les années 90.
le png devrait fonctionner aussi mais dans mes tests, le gif était de 43 octets et le png de 167 octets donc le gif a gagné.
p.s. n'oubliez pas une balise alt, les validateurs les aiment aussi.
J'utilise personnellement un about:blanksrc et traite l'icône d'icône cassée en définissant l'opacité de l'élément img sur 0.