在 angularjs 中获取和加载图像

Question

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

post数据示例：

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

所以，facebook post 应该有图片，而且它是从不同的来源获取的。每次我想获取 post 的图像时，我都会根据 post id

获取数据

{
  full_picture: 'http://linkhere'
 }

我的页面正在使用 angularjs 显示 post 内容。

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

基本上，我会使用post id 来获取图像url，但我不知道如何根据post 调用函数来获取图像url ID。我们有办法在 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" />

在 angularjs 中获取和加载图像

fetch and load image in angularjs

html

javascript

frontend

angularjs