Display image using angular js

Question

I want to display image on the page that is returned by the java controller.

Java controller:

 public FileSystemResource RetrieveLogo(@PathVariable("UniqueCode") String Code){

// get image file

return fileSystemResource;
}

at java script controller, I make a service call to get the image .

Javascript controller:

$scope.logo = function() {
         rest.retrieveLogoForMerchant({id: 'abcd'}).$promise.then(function(data) {
                            console.log("-------------success--------- " + angular.toJson(data));

                            $scope.logoImage = angular.toJson(data);
                        });
    }

Here the console prints -

{"0":"�","1":"�","2":"�","3":"�","4":"\u00.......etc}

On Html page

<img ng-src="{{logoImage}}" height="100" width="100"/>

On the page image displays blank and gives error in the console that -

http://localhost:9090/%7B%220%22:%22%EF%BF%BD%22,%221%22:%22%EF%BF%BD%22,%2…22%EF%BF%BD%22,%22246%22:%22\u0007%22,%22247%22:%22\u0014%22,%22248%22:%22 400 (Bad Request)

Suggest me ,that how can I display image properly.

Thanks

akmozo · Accepted Answer · 2019-08-26 13:15:18Z

3

Try removing the the angular.toJSON method here:

$scope.logoImage = angular.toJson(data);

And also

I think you are loading image through binary data append proper image encoding to the data Eg: ng-source={{data:image/png;base64........}}

edited Aug 26, 2019 at 13:15

akmozo

9,8493 gold badges30 silver badges45 bronze badges

answered Feb 11, 2015 at 11:31

NavyCody

4922 silver badges10 bronze badges

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

2 Comments

Anita Over a year ago

I have tried removing angular.toJson. if i'll remove that then other angular resource parameter will be added ($promise.$resolve). Thats, why I have added that.

NavyCody Over a year ago

i am assuming data parameter in the success callback is binary data streamed from server. Can you paste down the service/factory logic of the method retrieveLogoForMerchant of rest.

Amit · Accepted Answer · 2015-02-11 11:48:48Z

You need to set the right content type in response inside your Java controller, see below function

public void displayImage(HttpServletResponse response, byte[] imageArray) throws ServletException, IOException {
        System.out.println("Inside display Image function");

        if (imageArray != null && imageArray.length > 0) {
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            System.out.println("Image Array is not null :" + imageArray);
            response.setContentType("image/jpeg");
            OutputStream out = response.getOutputStream();
            out.write(imageArray);
            out.flush();
            out.close();
        } else {
           System.out.println("Image is null");
        }
    }

Than you need to make sure append that appropriate header before data content while setting it to img tag.. @Naveen has already pointed about it in his answer. Basically you need to have something like this

<img src="data:image/png;base64,/*Your data part goes here*//>

You also need to encode the stream to Base64 before assigning it to img. I had below line in my jsp you can alter it to suit your need..

<img id="userProfileImg" height="150px" width="150px"  name="userProfileImg" alt="../img/user_default_pic.png" src='data:image/jpg;base64,<%=Base64.encode(/*Blob data returned from database*/)%>'/>

user3773925 · Accepted Answer · 2015-02-11 11:09:01Z

0

Why don't you get the URL of the image via http (ajax call) and on success $scope.logoImage = data. data is the URL of the image retrieved via http.

answered Feb 11, 2015 at 11:09

user3773925

3 Comments

Anita Over a year ago

I didn't get your point .Can you elaborate? I am doing service call and on the success of that i am assigning data to $scope.logoImage.

user3773925 Over a year ago

I think you are returning the whole image-data from the server on the service call request. Whereas image-url should be assigned to ng-src. So, your server should return just the URL (string) of the image, not the image itself, on service request.

user3773925 Over a year ago

Also it should be ng-src='logoImage' instead of ng-src='{{logoImage}}'

Collectives™ on Stack Overflow

Display image using angular js

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related