Utilisation de ng-src vs src
Ce tutoriel illustre l'utilisation de la directive ngSrc au lieu de src :
<ul class="phones">
<li ng-repeat="phone in phones" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
</li>
</ul>
Ils demandent à:
Remplacez la directive ng-src par un ancien attribut src.
Utiliser des outils tels que Firebug, ou L'inspecteur Web de Chrome, ou journaux d'accès au serveur web, confirmez que l'application fait effectivement un demande étrangère à / app/ % 7B % 7Bphone.imageUrl%7D%7D (ou /app/{{téléphone.imageUrl}}).
Je l'ai fait et cela m'a donné le résultat correct:
<li class="thumbnail ng-scope" ng-repeat="phone in phones">
<img src="img/phones/motorola-xoom.0.jpg">
</li>
Y a-t-il une raison?
4 réponses
<img ng-src="{{phone.imageUrl}}">
Cela vous donne le résultat attendu, car phone.imageUrl est évalué et remplacé par sa valeur après le chargement d'angular.
<img src="{{phone.imageUrl}}">
Mais avec cela, le navigateur essaie de charger une image nommée {{phone.imageUrl}}, ce qui entraîne une requête échouée.
Vous pouvez le vérifier dans la console de votre navigateur.
À partir de documents angulaires
La façon boguée de l'écrire:
<img src="http://www.gravatar.com/avatar/{{hash}}"/>
La bonne façon de l'écrire:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
Pourquoi? en effet, lors du chargement de la page, avant le démarrage angulaire et la création de contrôleurs, le navigateur essaiera de charger l'image à partir de http://www.gravatar.com/avatar/{{hash}} et cela échouera. Ensuite, une fois angular démarré, il comprend que {{hash}} doit être remplacé par say logo.png, Maintenant l'attribut src change en http://www.gravatar.com/avatar/logo.png et l'image se charge correctement. Le problème est qu'il y a 2 les demandes vont et le premier échoue.
Pour résoudre ce problème, nous devrions utiliser ng-src qui est une directive angulaire et angular remplacera ng-src value dans l'attribut src seulement après que l'amorçage angulaire et les contrôleurs sont complètement chargés, et à ce moment-là {{hash}} aurait déjà été remplacé par une valeur de portée correcte.
Le src="{{phone.imageUrl}}" est inutile et crée une requête supplémentaire par le navigateur. Le navigateur fera au moins 2 GET requêtes essayant de charger cette image:
- avant que l'expression soit évaluée
{{phone.imageUrl}} - après que l'expression est évaluée
img/phones/motorola-xoom.0.jpg
Vous devez toujours utiliser la directive ng-src lorsque vous traitez des expressions angulaires. <img ng-src="{{phone.imageUrl}}"> vous donne le résultat attendu d'une seule demande.
Sur une note de côté, la même chose s'applique à ng-href, de sorte vous n'obtenez pas de liens brisés jusqu'à ce que le premier cycle de digestion entre en jeu.
Eh bien, en fait, cela a un sens à 100% car le HTML est traité séquentiellement et lorsque cette page HTML est traitée ligne par ligne, au moment où elle arrive à cette image, la ligne et le traitement de l'image, notre phone.imageUrl n'est pas encore défini.
Et en fait, Angular JS n'a pas encore traité ce morceau de HTML, et n'a pas encore cherché ces espaces réservés et remplacé ces expressions par les valeurs. Donc ce qui finit par arriver est que le navigateur obtient cette ligne et essaie de récupérer cette image à cette URL.
Et bien sûr, c'est une URL fausse, si elle contient toujours ces moustaches et accolades, et donc elle vous donne un 404, mais une fois bien sûr Angular s'en occupe, elle remplace cette URL par la bonne, et ensuite nous voyons toujours l'image, mais le message d'erreur 404 reste dans notre console.
Alors, comment pouvons-nous nous en occuper? Eh bien, nous ne pouvons pas prendre soin de cela en utilisant des astuces HTML régulières. Mais, nous pouvons nous en occuper en utilisant Angular. Nous avons besoin de d'une certaine manière de dire au navigateur de ne pas essayer de récupérer cette URL, mais en même temps chercher uniquement lorsque Angulaire est prêt pour l'interprétation de ces espaces réservés.
Eh bien, une façon de le faire est de mettre un attribut angulaire ici au lieu du HTML standard. Et l'attribut angulaire est juste ng-src. Donc, si nous disons que maintenant, revenez en arrière, vous verrez qu'il n'y a plus d'erreurs car l'image n'a été récupérée qu'une fois Qu'Angular a saisi ce HTML et traduit toutes les expressions dans leur valeur.