How can I use image form json response using angularjs?

Question

I have api which return image corresponsding to the userID.

API code whcih return image:

public function getImage($id) {
        if(File::exists('uploads/'.$id.'.jpg')) {
            $image = File::get('uploads/'.$id.'.jpg');
            return Response::make($image, 200, array('content-type' => 'image/jpg'));
        } else {
            return Response::json(array('error'=>true,'details'=>'No image.'));
        }

}

Route to get image is "api/image/id"

AngularJS Code:

QAApp.controller('imgCtrl', function ($scope, $http) {

      $scope.image = function (id) {
             $http({
                              method: 'GET', 
                              url: server + 'api/image/' + id,
                            }).success(function(data){
                              console.log(data);
                             $scope.imageUrl= data; // if you sure what data is you URL 
                       })
              }
          });

HTML Code :

<div class="artst-pic pull-left" ng-controller="imgCtrl">
       <img ng-src="{{imageUrl}}" ng-init="image(q.userID)" alt="" class="img-responsive" />
 </div>

If I give the api path with server path then I get the image but if I am using that api path in angularsjs code, I didnt get image, I an getting the response like that:

�ޑ��b��[��T��Ԏ��{��O��Q(�b'��ձ�3]Ӵ��ۯ��I��U+��=>��i�C�~o��/2fh�*��]Y�]�ƅ��ԋ��ʋj�ў��

I dont know why this is happen, please tell me if anybody know about this.

what you are getting back is actual image rather than its url. just specify image path in ng-src rather than getting back the actual image. — harishr
– harishr, Commented Sep 2, 2014 at 4:52
when I use "localhost:8000/api/image/7" directly on browser then I am getting image, and same if use it in my angularjs code, it will return the response that I have post.I dont know how can I get the image url, please see my code and tell where I am going wrong.... — Anita Mehta
– Anita Mehta, Commented Sep 2, 2014 at 5:00
just try it by changing to below code <img ng-src="/folder-having-images/image.jpg". so what you need in ng-src is the path of the file and not the image. e.g. ng-src="/uploads/7.jpg" you dont need the $http call. — harishr
– harishr, Commented Sep 2, 2014 at 5:03
But I didn't have are folder for image, I have to takeen it form server directly....Is there any method that I can use image directly which is return by api, othervise I have to write the code to download that image and save in a folder and then by using ng-src use the image.......... — Anita Mehta
– Anita Mehta, Commented Sep 2, 2014 at 5:10
i am talking about server folder path... not client. what i understand from your code is: uploads/7.jpg must be the file path — harishr
– harishr, Commented Sep 2, 2014 at 5:13

harishr · Accepted Answer · 2014-09-02 05:24:03Z

1

and in your html

<div class="artst-pic pull-left" ng-controller="imgCtrl">
       <img ng-src="uploads/{{q.UserID}}.jpg" class="img-responsive" />
 </div>

and remove the function from controller...

answered Sep 2, 2014 at 5:24

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

3 Comments

harishr Over a year ago

that does not need to be in database... files can be worked out from filesystem...

Anita Mehta Over a year ago

yes i tried but not getting image because I did'nt have that folder in my directive.....it is not possible with api call..because that api return image directly....

harishr Over a year ago

then you can change the api to return the path rather than image

Jitender Sharma · Accepted Answer · 2015-04-28 05:07:52Z

1

Like HarishR said "function getImage($id)" should return the path not the image, In your case it will return something like - /uploads/id.jpg

Though you do not need to make an api call if your code is storing all images in uploads folder with the name of a userId

edited Apr 28, 2015 at 5:07

answered Sep 2, 2014 at 5:12

Jitender Sharma

1193 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I use image form json response using angularjs?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related