vide ng-src ne met pas à jour l’image

J’utilise la directive ng-src afin d’éviter que le navigateur ne demande l’image avant que Angular évalue l’expression.

ng-src={{image}} mettra à jour l’atsortingbut src de l’image si l’expression “image” change. Je comprends mal pourquoi la directive ng-src ne met pas à jour le chemin de l’image si l’expression (“myImage.png”) est vide (“”).

Lorsque l’expression est vide, l’atsortingbut ng-src devient vide mais l’atsortingbut src rest le dernier src connu. Donc, il ne met pas à jour l’image. Pourquoi l’atsortingbut src n’est pas mis à jour (à une src vide) pour que l’image “disparaisse”.

Voici un plunker

Merci

La réponse à cela est dans le code angular . Ce n’est pas un bug, c’est juste le comportement qu’ils ont décidé de vouloir. À partir de la ligne 13895, vous pouvez voir ce code de directive:

 forEach(['src', 'srcset', 'href'], function(attrName) { var normalized = directiveNormalize('ng-' + attrName); ngAtsortingbuteAliasDirectives[normalized] = function() { return { priority: 99, // it needs to run after the atsortingbutes are interpolated link: function(scope, element, attr) { attr.$observe(normalized, function(value) { if (!value) return; attr.$set(attrName, value); if (msie) element.prop(attrName, attr[attrName]); }); } }; }; }); 

La clé est dans:

if (!value) return;

Donc, comme vous pouvez le voir, si vous modifiez l’expression ng-src en une chaîne vide, cela ne changera jamais la valeur réelle de src . Vous pouvez contourner cela en faisant quelque chose que MadScone a suggéré.

La suggestion de MadScone est une bonne idée, mais cela n’a pas fonctionné pour moi dans tous les navigateurs. J’ai fini par montrer l’élément seulement quand le src n’est pas vide:

  

Cela me semble être l’option la plus sûre après avoir lu le fil référencé par MadScone ( ici ). Comme plusieurs personnes l’ont souligné, la réponse acceptée ne fonctionne pas dans tous les navigateurs et présente d’autres problèmes. Le simple fait de cacher l’élément évite tout cela.

Mise à jour: Comme enpenax indiqué dans les commentaires, le !=='' dans le ng-show est totalement inutile. Voici la version plus propre:

  

Mise à jour (avril 2015)

Voir la réponse du développeur, apparemment cette méthode que j’ai suggérée à l’origine peut ne pas fonctionner dans tous les navigateurs.


Original (février 2014)

Je ne sais pas exactement pourquoi cela se produit, mais voici un moyen de le résoudre de toute façon. Ajoutez cette fonction à votre contrôleur:

 $scope.getImage = function(src) { if (src !== "") { return src; } else { return "//:0"; } }; 

L’image “vide” aura une source de //:0 qui ne provoquera pas l’apparition d’une icône d’image manquante (voir la réponse en haut sur ce sujet ).

Ensuite, vous pouvez définir votre source en utilisant:

  

MODIFIER:

En fait, il serait plus facile de changer de bouton en cliquant dessus:

  

Ensuite, il n’y a pas besoin de la fonction. Bien que je pense que la méthode de la fonction est meilleure.

Un autre moyen court de le résoudre:

le corriger par set value = “”; avec des espaces.

J’ajoute également le css suivant pour m’assurer qu’il n’est pas affiché.

 img[src="_"] display none !important 

la vraie raison a été discutée ici: https://github.com/angular/angular.js/issues/1218

Vous pouvez choisir n’importe quelle image 1x1px adaptée à votre site Web et remplacer http://www.1x1px.me/FFFFFF-0.png par vous-même. Pour mon site Web, j’utilise l’image disponible sur http://www.1x1px.me .

P / S: pas besoin de s’inquiéter de l’atsortingbut src d’origine de la balise img car il n’est pas affecté au modèle d’image

ng-hide et ng-show peuvent vous aider à le résoudre

  

$ scope.Image = null;

ou

  

$ scope.Image = ”;

Une solution possible pour vider ng-src peut être trouvée ici.

  

Des explications détaillées sur //:0 peuvent être trouvées dans cette réponse.

Résumer:

Il adopte le protocole actuel, omet le nom d’hôte et met le port à zéro, ce qui est invalide et doit être tué par la couche réseau.

De plus, au lieu de vider ng-src , si vous avez une source d’image par défaut, vous pouvez simplement définir le ng-src sur cette valeur par défaut lorsque ng-src doit être vide.

   

Cela fonctionne comme prévu Modifier:

D’autres travaux peuvent être faits, vous pourriez avoir utilisé et vider la chaîne.

 ng-click="superImage = ' ' 

pour le vider. Il ne déclenche pas 404