Angularjs showing image blob

问题

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

回答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

回答2:

image/png;base64

Set that as your response type.

来源：https://stackoverflow.com/questions/34492857/angularjs-showing-image-blob