Angularjs showing image blob

Question

I have a method to call APIs and get responses. One api returning an image. Content-Type:application/octet-stream If I set responseType: "blob", it is working fine.

$http({
            url: apiConstants.BASE_URL + 'login',
            method: "POST",
            responseType: "blob",
            data: {
                "Req": req
            },
            headers: {
                'X-Username': aUser,
                'X-Password': aPass,
            },
        }).success(function(data, status, headers, config) {
               var URL = $window.URL || $window.webkitURL;
               $rootScope.ImageSrc = URL.createObjectURL(data);
        }

But I want to remove responseType: "blob" from the request and trying to create the blob in following way

$http({
            url: apiConstants.BASE_URL + 'login',
            method: "POST",
            data: {
                "Req": req
            },
            headers: {
                'X-Username': aUser,
                'X-Password': aPass,
            },
        }).success(function(data, status, headers, config) {
              var blob = new Blob(
                 [data], 
                 {
                    type: 'application/octet-stream'
                 }
              );

              var URL = $window.URL || $window.webkitURL;
              $rootScope.ImageSrc = URL.createObjectURL(blob);
        }

But image is not showing in the html. this is the html code

<img class="img-responsive empImg" id="empImage" data-ng-src="{{ImageSrc}}" />

Could you please advise me on this

Does $rootScope.ImageSrc have a heading signature like data:image/png;base64? — IzumiSy
– IzumiSy, Commented Feb 9, 2017 at 4:41
Can I ask why? I think the former (and working) method looks more correct — Phil
– Phil, Commented Feb 9, 2017 at 5:11
@IzumiSy I suggest you look up the documentation for URL.createObjectURL — Phil
– Phil, Commented Feb 9, 2017 at 5:12
Also, the success method on the $http promise has been deprecated and removed in Angular v1.6. You should not be using it — Phil
– Phil, Commented Feb 9, 2017 at 5:17

Anas Omar · Accepted Answer · 2015-12-28 12:00:51Z

-1

try to put the src like this :

<img class="img-responsive empImg" id="empImage" data-ng-src="'data:image/png;base64,'+{{ImageSrc}}" />

and instead of png put the type of the image

answered Dec 28, 2015 at 12:00

Anas Omar

5043 silver badges9 bronze badges

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

2 Comments

mahedhanu Over a year ago

didn't work for me :(. in my case also server side returning a png image. any idea?

mahedhanu Over a year ago

After adding data-ng-src="'data:image/png;base64,'+{{ImageSrc}}" it gives me 500 internal server error.

Blockhead · Accepted Answer · 2017-02-09 04:37:42Z

-1

image/png;base64

Set that as your response type.

answered Feb 9, 2017 at 4:37

Blockhead

1

Collectives™ on Stack Overflow

Angularjs showing image blob

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related