Image Get Requests avec AngularJS

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é?

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>

Si quelqu'un cherche la solution pour styliser l'image d'arrière-plan, utilisez ceci:

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>