Question

我有一种调用API并获得响应的方法。一个api返回图像。内容类型：应用/八位字节流如果我设置responseType：＆＃34; blob＆＃34;，它工作正常。

$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);
        }

但我想删除responseType：＆＃34; blob＆＃34;从请求中尝试以下列方式创建blob

$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);
        }

但是图片没有在html中显示。这是html代码

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

你可以告诉我这个

Answer 1

尝试将src放在这样：

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

而不是png放置图像的类型

Answer 2

图像/ PNG; BASE64

将其设置为您的回复类型。

Angularjs显示图像blob

2 个答案: