web-dev-qa-db-fra.com

Définir une image src pour vider

Je voudrais mettre une image comme rien. En faisant src="", beaucoup de gens disent que cela peut causer des problèmes aux navigateurs: 

http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

donc je ne suis pas sûr si ci-dessous peut faire face au même problème que de définir src à vide:

<img id="myImage">

puisqu'il n'y a pas d'attribut src sur ce cas.

Donc, si je veux initialement ne définir aucune image, que puis-je faire de mieux?

htmlimagesrc
14
user304602

Meilleure solution

Initialisez l'image comme suit: src="//:0" comme ici : <img id="myImage" src="//:0">

Edit: selon le commentaire d'Alex ci-dessous, utiliser //:0 peut apparemment déclencher l'événement onError de la img. Alors méfiez-vous de cela.

Edit 2: D'après un commentaire de Drkawashima : à partir de Chrome 61, src="//:0" ne semble plus déclencher l'événement onError}.

Autre solution

Vous pouvez également utiliser une très petite image jusqu'à ce que vous remplissiez la balise src: comme cette image . Avec cette "très petite image", vous initialiseriez la balise comme suit:

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />

la source

Supprimer un élément du DOM

Sinon, si vous ne voulez simplement pas que l'élément apparaisse dans le DOM , utilisez simplement du JavaScript:

var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);

(selon cette réponse , l'utilisation de la fonction .remove() de JavaScript n'est pas recommandée, en raison de la mauvaise prise en charge du navigateur dans DOM 4)

Ou utilisez simplement un peu de jQuery:

$("#myObject").remove();
19
Jean-Paul

La manière la plus communément acceptée que je connaisse (recommandée par CSSTricks, etc.) est une image 1px en b.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> alt="">

Devtools apparaîtra comme une requête réseau 0B. Par conséquent, si vous surveillez les performances, vous serez peut-être surpris du nombre de demandes d'images. Mais sinon, il n'y a rien d'inquiétant.

Remarque: incluez toujours une alt vide, sinon les lecteurs d'écran liront l'url img à haute voix.

1
Drkawashima

Utilisez ce script pour définir une image par défaut si src est vide ou vide 

$(document).ready(function () {
   $('img').each(function () {
       if($(this).attr('src')=="") {
          $(this).attr('src', 'Images/download.jpg');
       }
   });
});
0
Dot Net

Utilisez simplement un symbole de hachage #. C'est une valeur valide pour l'attribut src. :) https://stackoverflow.com/a/28077004/3841049

0
iGidas