CODEWITHSUNDEEP
javaangularjs
Anita
Anita

Reputation: 2400

Display image using angular js

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

Upvotes: 1

Views: 1821

Answers (3)

NavyCody
NavyCody

Reputation: 492

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........}}

Upvotes: 3

Amit
Amit

Reputation: 13364

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*/)%>'/>

Upvotes: 1

user3773925
user3773925

Reputation:

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.

Upvotes: 0

Related Questions