javascript 在angularjs中获取和加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29784150/
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
fetch and load image in angularjs
提问by Hien Luong
I'm fetching post data from facebook on my website, but the json data does not contain full size image. So I have to fetch image from other source.
我正在我的网站上从 Facebook 获取帖子数据，但 json 数据不包含全尺寸图像。所以我必须从其他来源获取图像。
post data example:
发布数据示例：
{
"data": [{
"id": "1",
"from": {
"category": "Company",
"name": "Example",
"id": "12"
},
{
"id": "2",
"from": {
"category": "Company",
"name": "Example1",
"id": "112"
}
]}
so, the facebook post should have images and it fetches from different source. Each time I want to get image of a post, I will fetch data based on post id
所以，facebook 帖子应该有图片，它从不同的来源获取。每次我想获取帖子的图像时，我都会根据帖子 ID 获取数据
{
full_picture: 'http://linkhere'
}
my page is using angularjs to display post content.
我的页面正在使用 angularjs 来显示帖子内容。
<div ng-repeat="post in postsList">
<div>{{post.id}}</div>
<img src="???" />
</div>
Basically, I will use post id to get image url, but I dont know how to call the function to get image url based on the post id. Do we have the way in angularjs that passing something like
基本上，我会使用post id来获取图片url，但我不知道如何调用函数来根据post id获取图片url。我们有没有办法在 angularjs 中传递类似的东西
<image ng-src="funcName({{post.id}})" />
I'm totally new with angularjs framework, so I appreciate all ideas
我对 angularjs 框架完全陌生，所以我很欣赏所有的想法
回答by DTing
You don't need the expression to call your function with post.id. You do however, need the function inside an expression for ng-src.
您不需要使用 post.id 调用您的函数的表达式。但是，您确实需要在ng-src.
<image ng-src="{{funcName(post.id)}}" />
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.posts = [{id: 1}, {id: 2}];
$scope.funcName = function(id) {
return IMAGES[id];
};
});
var IMAGES = {
1: 'BoCw8.png',
2: 'Ed3JT.png'
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
<div ng-repeat="post in posts">
<image ng-src="http://i.stack.imgur.com/{{funcName(post.id)}}" />
</div>
</div>
