I'm fetching post data from facebook on my website, but the json data does not contain full size image. So I have to fetch image from other source.

post data example:

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

so, the facebook post should have images and it fetches from different source. Each time I want to get image of a post, I will fetch data based on post id

{
  full_picture: 'http://linkhere'
 }

my page is using angularjs to display post content.

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

Basically, I will use post id to get image url, but I dont know how to call the function to get image url based on the post id. Do we have the way in angularjs that passing something like

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

I'm totally new with angularjs framework, so I appreciate all ideas

I'm fetching post data from facebook on my website, but the json data does not contain full size image. So I have to fetch image from other source.

post data example:

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

so, the facebook post should have images and it fetches from different source. Each time I want to get image of a post, I will fetch data based on post id

{
  full_picture: 'http://linkhere'
 }

my page is using angularjs to display post content.

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

Basically, I will use post id to get image url, but I dont know how to call the function to get image url based on the post id. Do we have the way in angularjs that passing something like

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

I'm totally new with angularjs framework, so I appreciate all ideas

• javascript
• html
• angularjs
• frontend

• Did you try ng-src="{{ funcName(post.id) }}"? As far as I can see, that should work... – helmbert Commented Apr 21, 2015 at 22:32
• If image size is too large(>10 MB), image not load properly. – Hardik Mandankaa Commented Apr 15, 2017 at 5:45

2 Answers 2

You don't need the expression to call your function with post.id. You do however, need the function inside an expression for 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./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="https://i.sstatic/{{funcName(post.id)}}" />
  </div>
</div>

Basically, yes. Check the docs for ng-src

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