Quelle est la manière valide d'inclure une image sans src?

J'ai une image que je remplirai dynamiquement avec un src plus tard avec javascript mais pour plus de facilité, je veux que la balise d'image existe à pageload mais n'affiche simplement rien. Je sais que ce <img src='' />n'est pas valide, alors quelle est la meilleure façon de procéder?

Bien qu'il n'y ait aucun moyen valide d'omettre la source d'une image, il existe des sources qui ne provoqueront pas de hits sur le serveur. J'ai récemment eu un problème similaire avec iframes et j'ai décidé //:0d'être la meilleure option. Pas vraiment!

En commençant par //(en omettant le protocole), le protocole de la page actuelle 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 :0garantit qu'aucune demande de serveur ne peut être faite (ce n'est pas un port valide, selon la spécification).

C'est la seule URL que j'ai trouvée, qui n'a causé aucun accès au serveur ou message d'erreur dans aucun navigateur. Le choix habituel - javascript:void(0)- provoquera un avertissement de "contenu non sécurisé" dans IE7 s'il est utilisé sur une page servie via HTTPS. Tout autre port a provoqué une tentative de connexion au serveur, même pour les adresses non valides. (Certains navigateurs feraient simplement la demande invalide et attendraient qu'ils expirent.)

Cela a été testé dans Chrome, Safari 5, FF 3.6 et IE 6/7/8, mais je m'attendrais à ce qu'il fonctionne dans n'importe quel navigateur, car ce devrait être la couche réseau qui tue toute tentative de demande.

Une autre option consiste à incorporer une image vierge. Toute image qui convient à votre objectif fera l'affaire, mais l'exemple suivant code un GIF de seulement 26 octets - à partir 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 sûr, vous devez tenir compte des exigences de prise en charge de votre navigateur. Aucun support pour IE7 ou moins n'est notable. http://caniuse.com/datauri

Ces jours-ci, à mon humble avis, le meilleur moyen court, sain et valide pour un src img vide est comme ceci:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

Le deuxième exemple affiche "Texte alternatif" (plus l'icône d'image cassée dans Chrome et IE).

"data:,"est un URI valide. Par défaut, un type de support vide est text/plain. Il représente donc un fichier texte vide et équivaut à"data:text/plain,"

Je recommande d'ajouter dynamiquement les éléments, et si vous utilisez jQuery ou une autre bibliothèque JavaScript, c'est assez simple:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

regardez aussi prependet append. Sinon, si vous avez une balise d'image comme celle-ci et que vous souhaitez la valider, vous pouvez envisager d'utiliser une image fictive, telle qu'un gif transparent 1px ou png.

Je n'ai pas fait ça depuis un moment, mais j'ai dû passer par la même chose une fois.

<img src="about:blank" alt="" />

Est mon préféré - //:0celui qui implique que vous essayerez d'établir une connexion HTTP / HTTPS au serveur d'origine sur le port zéro (le port tcpmux?) - 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 pas envoyer de demande. Mais je préfère quand même que ce ne soit pas spécifié de cette façon, alors que ce n'est probablement pas ce que vous voulez dire.

Quoi qu'il en soit, le rendu de about:blankest en fait très rapide dans tous les navigateurs que j'ai testés. Je viens de le jeter dans le validateur W3C et il ne s'est pas plaint, donc il pourrait même être valide.

Edit : Ne faites pas ça; cela ne fonctionne pas sur tous les navigateurs (il affichera une icône 'image cassée' comme indiqué dans les commentaires de cette réponse). Utilisez la <img src='data:...solution ci-dessous. Ou si vous ne vous souciez pas de la validité, mais que vous souhaitez toujours éviter les demandes superflues à votre serveur, vous pouvez le faire <img alt="" />sans attribut src. Mais c'est du HTML INVALIDE alors choisissez-le soigneusement.

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 sur: http://memso.com/Test/BlankImage.html

Comme écrit dans les commentaires, cette méthode est erronée.

Je n'ai pas trouvé cette réponse auparavant, mais selon une balise vide valide des spécifications W3src serait un lien d'ancrage #.

Exemple: src="#",src="#empty"

La page est validée avec succès et aucune demande supplémentaire n'est effectuée.

J'ai trouvé que simplement définir le src sur une chaîne vide et ajouter une règle à votre CSS pour masquer l'icône d'image cassée fonctionne très bien.

[src=''] {
    visibility: hidden;
}

si vous gardez l'attribut src vide, le navigateur enverra une demande à l'URL de la page actuelle ajoutez toujours 1 * 1 img transparent 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 de demande et valide correctement.

Les navigateurs bloqueront simplement l'accès au système de fichiers local.

Mais il pourrait y avoir une erreur affichée dans le journal de la console dans Chrome, par exemple:

Not allowed to load local resource: file://null/

Utilisez un SVG vraiment vierge, valide et hautement compatible, basé sur cet 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 de 300x150px comme n'importe quel SVG, mais vous pouvez travailler avec cela dans les imgstyles par défaut de vos éléments, comme vous en auriez probablement besoin dans tous les cas dans l'implémentation pratique.

À partir de la réponse de Ben Blank, la seule façon de valider cela dans le validateur w3 était la suivante:

<img src="/./.:0" alt="">`

J'utilise personnellement un about:blank srcet traite l'icône de l'image cassée en définissant l'opacité de l' imgélément sur 0.

<img src="invis.gif" />

Où invis.gif est un gif transparent à un pixel. Cela ne cassera pas dans les futures versions de navigateur et fonctionne dans les navigateurs hérités depuis les années 90.

png devrait aussi fonctionner mais dans mes tests, le gif était de 43 octets et le png était de 167 octets donc le gif a gagné.

ps n'oubliez pas une balise alt, les validateurs comme eux aussi.

Simplement, comme ça:

<img id="give_me_src"/>