在angularjs中获取和加载图像答案

【问题标题】：fetch and load image in angularjs在angularjs中获取和加载图像
【发布时间】：2015-04-21 22:16:16
【问题描述】：

我在我的网站上从 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 框架的新手，所以我很欣赏所有的想法

【问题讨论】：

你试过ng-src="{{ funcName(post.id) }}"吗？据我所知，这应该工作......
如果图片太大（>10 MB），图片无法正常加载。

标签： javascript html angularjs frontend

【解决方案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>

【讨论】：

如果图片太大（>10 MB），图片无法正常加载。

【解决方案2】：

基本上，是的。查看ng-src的文档

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

【讨论】：