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

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}}"可能导致浏览器调用url http:\\yourServer\{{param}},这将是无效的.ng-src已经创建来解决这个问题.