How can I show the image which is taken from restfull api using angularJs?

Question

I have api which is return the image whether it is present in the database or not, I have to use that api with angularJs to display that image in my UI.

I have to pass userid and check corresponding to that userid whether the image of that user is present or not, if present that display that image otherwise display dummy image.

AngularJs Code for taking image from server

QAApp.controller('imgCtrl', function ($scope, $http) {
  // id is userid.
  $scope.image = function (id) {
       var request = $http({
                          method: 'GET', 
                          url: server + 'api/image/' + id,
                        });
            request.success(function(data, status, headers, config) {

            $scope.response = data;
            console.log($scope.response);
        });
  }


});

HTML code:

<div class="artst-pic pull-left">
      <img src=" " alt="" class="img-responsive" />
</div>

Please tell me how can I do this.

does the http.get return the image url or the image itself ? I'd say, that the backend should decide, if user's image or dummy image should be shown, by just passing the url — Konstantin Krass
– Konstantin Krass, Commented Sep 1, 2014 at 8:58
http.get return image itself....I am checking locally like "localhost:8000/api/image/7" it will return image not url... — Anita Mehta
– Anita Mehta, Commented Sep 1, 2014 at 9:01
yes, then it will return json response like that.."{"error":true,"details":"No image."}" — Anita Mehta
– Anita Mehta, Commented Sep 1, 2014 at 9:06
This is a kinda bad concept, when a rest service returns 2 different media. It should just return the URL or the image, that much easier to handle. — Konstantin Krass
– Konstantin Krass, Commented Sep 1, 2014 at 9:07

Dhairya Vora · Accepted Answer · 2014-09-01 09:14:19Z

2

first of all, with <img> tag you need to use ng-src instead of src

then, you can bind $scope.imageUrl with ng-src like:

<img ng-src="imageUrl" alt="" class="img-responsive" />

now in your controller:

request.success(function(data, status, headers, config) {
    if(data.imagePath)
    {
        $scope.imageUrl = data.imagePath;
    } else {
        $scope.imageUrl = 'http://some/defaulturl.png';
    }
});

answered Sep 1, 2014 at 9:14

Dhairya Vora

1,27912 silver badges36 bronze badges

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

2 Comments

Anita Mehta Over a year ago

this is not working, please tell me the another alternative method, where I can pass the userid in a function and get the image and the display....

nuander Over a year ago

the user said they are getting an image, not an image path

Roman Kolpak · Accepted Answer · 2014-09-01 09:08:56Z

2

You can interpolate your image url into the template like this:

<img ng-src="{{ imageUrl }}" />

There's no need to do AJAX request to get the image. <img /> tag will do this for you

answered Sep 1, 2014 at 9:08

Roman Kolpak

2,0221 gold badge23 silver badges26 bronze badges

4 Comments

Konstantin Krass Over a year ago

but you need a seperation due to the possible json return, when the user image is not existing

Ali Habibzadeh Over a year ago

if an image is broken it will fire its onerror event. handle that: <img src="someimage.jpg" onerror="this.style.display='none';" />

Anita Mehta Over a year ago

I didnt have imgurl, I have to pass the userID and take the image of that particular userId image and this is I am getting by "localhost:8000/api/image/id", id is varying every time, what I am thinking is, write a function in which I pass the "id" of that user and take the image as I previously post my code...but I am not able to please tell how can I do this....

Roman Kolpak Over a year ago

You can something like this: <img ng-src="{{ getImageUrl(userId) }}" />, where getImageUrl is a function in your $scope. You can do whatever you need inside the function, handle for possibly a missing image and return some kind of default one, etc.

Collectives™ on Stack Overflow

How can I show the image which is taken from restfull api using angularJs?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related