在angularjs中获取和加载图像

Question

我在我的网站上从facebook获取帖子数据，但json数据不包含完整大小的图像。因此，我必须从其他来源获取图像。

post数据示例：

{
 "data": [{
  "id": "1", 
  "from": {
    "category": "Company", 
    "name": "Example", 
    "id": "12"
  }, 
  {
  "id": "2", 
  "from": {
    "category": "Company", 
    "name": "Example1", 
    "id": "112"
  }
]} 

所以，facebook的帖子应该有图片，它从不同的来源获取。每次我想获取帖子的图片时，我都会根据帖子id来获取数据。

{
  full_picture: 'http://linkhere'
 }

我的页面使用angularjs来显示帖子内容。

<div ng-repeat="post in postsList">
   <div>{{post.id}}</div>
   <img src="???" />
</div>

基本上，我会使用post id来获取图片url，但是我不知道如何调用函数来获取基于post id的图片url。我们有没有在angularjs中传递东西的方法，比如

<image ng-src="funcName({{post.id}})" />

我对angularjs框架完全陌生，所以我很欣赏所有的想法。

Answer 1

使用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>

​

​

​

Answer 2

基本上是这样的。检查文档中是否有ng-src

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />