web-dev-qa-db-fra.com

Image Recevez des demandes avec AngularJS

Je stocke la chaîne source d'une image à restituer au format HTML dans le contrôleur AngularJS, mais elle génère un 404 avant que le contrôleur Angular 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 au {{ dans le modèle).

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

Comment puis-je empêcher cela? En d’autres termes, ne chargez l’image que lorsque le contrôleur Angular) a été initialisé?

javascripthttp-status-code-404angularjs
105
ssb

Essayez de remplacer votre src par ng-src pour plus d’informations voir la documentation :

L'utilisation de Angular balisage comme {{hash}} dans un attribut src ne fonctionne pas correctement. Le navigateur extraira 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>
226
Gloopy

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

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