在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中獲取並加載圖像

回答

相關問題