从 Web API 服务显示 AngularJS HTML 中的字节数组图像

【问题标题】：Display Byte Array Image in AngualrJS HTML from Web API Service从 Web API 服务显示 AngularJS HTML 中的字节数组图像
【发布时间】：2016-12-03 17:54:50
【问题描述】：

我正在为服务构建一个 AngularJS 应用程序，我使用 .NET C# 进行编码。现在我正在遵循以下帖子Load image from C# Byte array and place image in html tag using AngularJS中提到的代码结构 -

但是在上述方法中，他们将图像作为 Base64 Sting 发送，在这里我们将 Base64 绑定到 Angular HTML 中。它会降低加载性能。在我的一篇文章中，我得到了一个相关的答案Compress a Byte Array Image without Scaling using .Net C#，上面写着“发送数据通常而不是 Base64”字符串。

请帮助我如何在 HTML <img /> Tag 中显示字节数组图像。目前我正在使用以下

<img ng-src="data:image/jpeg;base64,{{ image.Content }}" />

【问题讨论】：

标签： c# html angularjs image bytearray

【解决方案1】：

通过这样的控制器函数调用二进制图像数据（作为一种可能的解决方案，请参阅指向 Fiddle 的链接）。

<img data-ng-src="{{getImage(image.Content)}}" />

$scope.getImage = function(data){
    return 'data:image/jpeg;base64,' + data;
}

查看显示 2 种可能方法的小提琴。 JSFiddle as example

【讨论】：

这里你使用了一个属性data，它是一个Base64字符串？
实际上它只是用正确的data:image/jpeg;base64, 前缀包装dataobject。关于您的问题，我注意到您使用 image.Content - 请注意 JS 区分大小写。
这里 image.Content 是 Base64 String - Convert.ToBase64String(imgArr) - 这里的问题是我将字符串返回给客户端，然后我在 @987654330 中绑定了 Sting image.Content @。因此，它会降低性能。现在我发送字节数组 imgArr 而不是 Convert.ToBase64String(imgArr).