javascript 图像未使用 AngularJS ng-repeat 和 ng-src 指令加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27686817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image not loading using AngularJS ng-repeat and ng-src directive
提问by FossArduino
So basically when I was using native html5 i was using five <img src="">tags to load five images. When i wanted to use AngularJS i thought of iterating a divfive times through ng-repeatand using ng-src=""get the image whose source path is stored in an array in the controller. But some how im always getting this error GET file:///home/sanad/Desktop/drag/x.source net::ERR_FILE_NOT_FOUND
所以基本上当我使用原生 html5 时，我使用了五个<img src="">标签来加载五个图像。当我想使用 AngularJS 时，我想到了迭代div五次ng-repeat并使用ng-src=""get 图像，其源路径存储在控制器的数组中。但有些我总是收到这个错误GET file:///home/sanad/Desktop/drag/x.source net::ERR_FILE_NOT_FOUND
This is my html:
这是我的 html：
<div ng-repeat="x in img">{{x.source}}
<img ng-id="x.id" ng-src="x.source" >
</div>
This is my js:
这是我的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'}
];
});
回答by Deblaton Jean-Philippe
<div ng-repeat="x in img">
<img ng-src="{{x.source}}" >
</div>`
I'm not sure about what ng-src does so I did not suggested it in first place.
我不确定 ng-src 做了什么，所以我没有首先建议它。
I also have the feeling that using a directive for doing something that html does well is not a good approach. In fact, it instantiates new scopes, new watches,...
我也有一种感觉，使用指令来做一些 html 做得好的事情并不是一个好方法。事实上，它实例化了新的范围、新的手表、...
Edit:
编辑：
Using src="{{param}}"instead of ng-src="{{param}}"could lead the browser to make a call to the url http:\\yourServer\{{param}}, which would be invalid. ng-srchas been created to solve that problem.
使用src="{{param}}"而不是ng-src="{{param}}"可能会导致浏览器调用 url http:\\yourServer\{{param}}，这将是无效的。ng-src已经被创建来解决这个问题。
回答by Aleksa
You can do this too
你也可以这样做
<img ng-repeat="x in img" src="{{x}}">
it works properly
它工作正常
回答by dam1
<img ng-repeat="x in img" ng-src="{{x.source}}">
If you have just an array of images
如果您只有一组图像
<img ng-repeat="img in images track by $index" ng-src="{{img}}">
