在angularjs中获取并加载图像

我从我的网站上的Facebook获取发布数据，但json数据不包含完整大小的图像。所以我必须从其他来源获取图像。在angularjs中获取并加载图像

后数据例如：

{ 
"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>

基本上，我将使用后的ID来获得图像的URL，但我不知道如何调用该函数基础上的帖子ID来获得图像的URL。难道我们在angularjs是通过类似

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

我完全新的与angularjs框架的方式，所以我很感谢所有的想法

来源

2015-04-21 Hien Luong

您是否试过'ng-src =“{{funcName（post.id）}}”'？据我所知，这应该工作... – helmbert

如果图像尺寸太大（> 10 MB），图像加载不正确。 –

你不需要表达打电话给你的函数后。 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>

来源

2015-04-21 22:20:59 DTing

如果图像尺寸太大（> 10 MB），图像加载不正确。 –

基本上是这样。检查文档ng-src

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

来源

2015-04-21 22:31:02

在angularjs中获取并加载图像

回答

相关问题