Image Get Requests avec AngularJS


106

Je stocke la chaîne source d'une image à restituer en HTML dans le contrôleur AngularJS, mais cela donne un 404 avant l'initialisation du contrôleur angulaire.

Voici le HTML:

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

Contrôleur angulaire:

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

Et l'erreur que j'obtiens ( %7D%7Dcorrespond à la {{dans le modèle).

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 

Comment éviter que cela ne se produise? Autrement dit, ne chargez l'image que lorsque le contrôleur angulaire a été initialisé?

Réponses:


230

Essayez de remplacer votre src par ng-src pour plus d'informations, consultez la documentation :

L'utilisation d'un balisage Angular comme {{hash}} dans un attribut src ne fonctionne pas correctement: le navigateur va chercher à partir de l'URL avec le texte littéral {{hash}} jusqu'à ce que Angular remplace l'expression à l'intérieur de {{hash}}. La directive ngSrc résout ce problème.

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

2
Il est préférable d'utiliser data-ng-controller et data-ng-src pour que le HTML soit valide.
Juampy NR

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.