javascript - 在 angularjs 中获取并加载图像

Question

我正在我的网站上从 facebook 获取帖子数据，但 json 数据不包含完整尺寸的图像。所以我必须从其他来源获取图像。

发布数据示例:

{
 "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="/image/{{funcName(post.id)}}" />
  </div>
</div>