Not able to get image as json response using angularJS?

Question

I am getting image in json response form restful api and I have to use that image in html using angularjs.

I dont know how can I use that image using angularJs

If I am trying like that "http:/api/image/id" where id is "userID". But when I write the code in angularjs I didnt get any response.I tried to debug code by using breakpoints and but it didn't go inside the function

JS Code

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

            });
          }
      });

HTML Code

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

Please tell me how can I use this.

I am not able to post json response, by using this url localhost:8000/api/image/id, then it will display the image directly not url, so i have to display that image...I didnt get any solution how I can use it.......where /api/image/id this is the api path ... — Anita Mehta
– Anita Mehta, Commented Sep 1, 2014 at 15:41
Object {data: "��JFIFHH��ExifMM*…��f�*�c#��B��z��h��)Ob��5��o�QY��", status: 200, headers: function, config: Object}..... I am getting json response like that — Anita Mehta
– Anita Mehta, Commented Sep 1, 2014 at 15:45

Florian F. · Accepted Answer · 2014-09-02 08:51:21Z

2

From what I understand, the API directly sends you the image, not any JSON..

Then just display it like you would display any image (you don't need ajax):

JS

$scope.image = function (id) {
    return server + 'api/image/' + id;
};

HTML

<img ng-src="{{image(q.userID)}}"/>

answered Sep 2, 2014 at 8:51

Florian F.

4,70029 silver badges50 bronze badges

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

2 Comments

Florian F. Over a year ago

Depends if you have access to server side code or not. Anyhow, I encourage you to post a new question with more information on that matter.

Anita Mehta Over a year ago

I didn't have access to server side, if image is not present the that API path return json response with "No image found", so if this message is come at that time I have to use dummy image....

Narek Mamikonyan · Accepted Answer · 2014-09-01 15:30:28Z

Javascript

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

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

HTML

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

please tell me how can I do this, I posted my json response also, please see, how can I solve this problem

Glen Mazza · Accepted Answer · 2014-09-01 17:48:26Z

0

The Apache Roller source code has an example of using angular.js to bring in an image source: http://svn.apache.org/viewvc/roller/trunk/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp?annotate=1621546 (line 126, with the JavaScript at the bottom of the file).

answered Sep 1, 2014 at 17:48

Glen Mazza

7981 gold badge6 silver badges28 bronze badges

Collectives™ on Stack Overflow

Not able to get image as json response using angularJS?

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related