Question

所以基本上当我使用原生html5时，我使用五个<img src="">标签来加载五个图像。当我想使用AngularJS时，我想通过div重复ng-repeat五次并使用ng-src=""获取源路径存储在控制器中的数组中的图像。但有些我总是得到这个错误GET file:///home/sanad/Desktop/drag/x.source net::ERR_FILE_NOT_FOUND

这是我的HTML：

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

这是我的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'}
    ];
});

Answer 1

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

我不确定ng-src是做什么的，所以我没有在第一时间建议它。

我也觉得使用指令做一些html做得好的事情并不是一个好方法。事实上，它实例化新的范围，新手表，......

修改

使用src="{{param}}"代替ng-src="{{param}}"可能会导致浏览器调用网址http:\\yourServer\{{param}}，这将无效。已创建ng-src来解决该问题。

Answer 2

你也可以这样做

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

它正常运作

Answer 3

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

如果你只有一组图像

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

图像未使用AngularJS ng-repeat和ng-src指令加载

3 个答案: