Image Obtenez des demandes avec AngularJS Javascript Girl

Je stocke la chaîne source d'une image à rendre en HTML dans le contrôleur AngularJS, mais elle produit un 404 avant que le contrôleur Angular ne soit initialisé.

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 je reçois ( %7D%7D correspond à {{ dans le modèle).

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

Comment puis-je empêcher cela? C'est-à-dire, 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, voir la documentation :

L'utilisation du balisage angulaire comme {{hash}} dans un attribut src ne fonctionne pas correctement: le navigateur récupérera de l'URL avec le texte littéral {{hash}} jusqu'à ce que Angulaire remplace l'expression dans {{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 le fond de l'image de fond, utilisez ceci:

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