fetch and load image in angularjs

Question

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

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

dting · Accepted Answer · 2015-04-21 22:27:48Z

3

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.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="https://i.sstatic.net/{{funcName(post.id)}}" />
  </div>
</div>

edited Apr 21, 2015 at 22:27

answered Apr 21, 2015 at 22:20

dting

39.4k10 gold badges98 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hardik Mandankaa Over a year ago

If image size is too large(>10 MB), image not load properly.

J-Dizzle · Accepted Answer · 2015-04-21 22:31:02Z

3

Basically, yes. Check the docs for ng-src

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

answered Apr 21, 2015 at 22:31

J-Dizzle

3,1996 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

fetch and load image in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related