1

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

mahedhanu
  • 175
  • 3
  • 14
  • Does `$rootScope.ImageSrc` have a heading signature like `data:image/png;base64`? – IzumiSy Feb 09 '17 at 04:41
  • Can I ask why? I think the former (and working) method looks more correct – Phil Feb 09 '17 at 05:11
  • @IzumiSy I suggest you look up the documentation for `URL.createObjectURL` – Phil Feb 09 '17 at 05: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 Feb 09 '17 at 05:17

2 Answers2

-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

Anas Omar
  • 504
  • 3
  • 8
-1

image/png;base64

Set that as your response type.

Blockhead
  • 1