Image pas de chargement en utilisant AngularJS ng-repeat et ng-src directive

Donc, fondamentalement, lorsque j'ai été en utilisant html5 native, j'ai été à l'aide de cinq <img src=""> balises à la charge de cinq images. Lorsque j'ai voulu utiliser AngularJS j'ai pensé à l'itération d'un div cinq fois par ng-repeat et à l'aide de ng-src="" obtenir l'image dont le chemin source est stocké dans un tableau dans le contrôleur. Mais im toujours cette erreur GET file:///home/sanad/Desktop/drag/x.source net::ERR_FILE_NOT_FOUND

C'est mon code html:

<div ng-repeat="x in img">{{x.source}}
    <img ng-id="x.id" ng-src="x.source" >
</div>

C'est mon js:

var app=angular.module('d2d',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {id:'table',source:'images/table.jpg'},
        {id:'paper',source:'images/paper.jpg'},
        {id:'computer',source:'images/computer.jpg'},
        {id:'ac',source:'images/ac.jpg'},
        {id:'sofa',source:'images/sofa.jpg'}
    ];
});
Essayez d'utiliser <img ng-src="{{x.source}}">
vous pouvez définir l'image avec css au lieu d'utiliser une image. Angularjs ont des politiques de sécurité qui pourrait désactiver ng-src sur les images à l'intérieur de ng-repeat: <div data-ng-repeat="i in images"><div style="background:url(imgs/{{i.srcimg}})"></div></div>

OriginalL'auteur FossArduino | 2014-12-29

  1. 7
     <div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

    Je ne suis pas sûr de ce que ng-src n'donc je n'ai pas suggéré dans la première place.

    J'ai aussi le sentiment que l'utilisation d'une directive pour faire quelque chose que le html n'est pas une bonne approche. En fait, il instancie de nouveaux domaines, de nouvelles montres,...

    Edit:

    À l'aide de src="{{param}}" au lieu de ng-src="{{param}}" pourrait conduire le navigateur pour faire un appel à l'url http:\\yourServer\{{param}}, qui serait invalide. ng-src a été créé pour résoudre ce problème.

    pourquoi la différence? il a travaillé btw!
    Selon le AngularJS API, c'est un "buggy façon de le faire". Le bon est à utiliser le mixage de votre réponse à la question. <img ng-src="{{x.source}}"/>. Ref: Angulaire de l'API
    merci pour votre amélioration.
    Pour info ng-src ne pas créer un nouveau champ d'application ou une nouvelle montre. Une montre est ajouté en vertu de l'interpolation ({{}}) dans les deux cas. Il n'y a pas de supplément à regarder à partir d'une solution à l'autre. Aussi, les deux solutions ne crée pas de champ d'application supplémentaire.

    OriginalL'auteur Deblaton Jean-Philippe

  2. 2

    Vous pouvez le faire aussi

    <img ng-repeat="x in img" src="{{x}}">

    il fonctionne correctement

    OriginalL'auteur Aleksa

  3. 0
    <img ng-repeat="x in img" ng-src="{{x.source}}">

    Si vous avez juste un tableau d'images 

    <img ng-repeat="img in images track by $index" ng-src="{{img}}">

    OriginalL'auteur dam1