Question

我有一个服务器端应用程序将返回一个图像。这些是响应标题：

Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1

在角度，我需要显示图像。获取图像时，我使用angularJS $http来调用服务器并将结果放在范围内，但我从未达到$http的成功函数。从邮递员执行此调用会正常返回图像。我很好奇如何让Angular显示图像。

这是我显示图像的方式：

<img ng-src={{image}} />

以下是从服务器获取图像的调用：

$http.get(url, {responseType: "arraybuffer"})
    .success(function(data) {
        $scope.image= data;
    }
)

Answer 1

我同意Bellu的回应，因为您应该使用.then函数，而不是.success从$http.get返回的承诺上的ng-src函数。但是，我想你的ng-src引用仍然存在问题，因为你没有提供URL，而是提供你的字节数组。

要将<img ng-src="data:image/JPEG;base64,{{image}}">引用绑定到客户端内存中保存的字节数组，您的绑定应采用以下形式：

ng-src

修改

由于我从未明确提及过，因此上面的$http绑定假定您的图像数据采用base64格式。如果数组尚未采用base64格式，HarrisonA提供了一种转换数组的方法。

Answer 2

只想添加到jdmcnair的答案和Loshmeey的评论：

下面是我用来将数组缓冲区转换为base 64字符串的函数的链接。

ArrayBuffer to base64 encoded string

功能：

function _arrayBufferToBase64( buffer ) {
  var binary = '';
  var bytes = new Uint8Array( buffer );
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode( bytes[ i ] );
  }
  return window.btoa( binary );
}

我在角度控制器中使用了这个函数，然后将结果（使用$ scope变量）传递给我的html文件中的img元素。

Answer 3

我认为您应该在角度中使用然后回调 documentation他们说成功回调一直是弃用。
您的img位于数据响应属性中。

经过这些考虑，你可以尝试这样的事情。

uglify

如何在Angular JS中显示作为字节数组接收的图像

3 个答案: