显示来自Web API服务的AnguarJS HTML中的字节数组图像

本文关键字：字节 字节数 数组 图像 HTML AnguarJS Web API 服务 显示 | 更新日期: 2023-09-27 17:59:13

我正在为我正在使用的服务构建一个AngularJS应用程序。NET C#进行编码。现在，我正在使用C#字节数组的后加载图像中提到的代码结构，并使用AngularJS-将图像放置在html标签中

但在上述方法中，他们将图像作为Base64 Sting发送，而在这里，我们将Base64绑定到Angular HTML中。它会降低加载性能。在我的一篇文章中，我得到了一个相关的答案：使用压缩字节阵列图像而不缩放。Net C#中，它声明"发送通常的数据而不是Base64"字符串。

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

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

显示来自Web API服务的AnguarJS HTML中的字节数组图像

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

<img data-ng-src="{{getImage(image.Content)}}" />
$scope.getImage = function(data){
    return 'data:image/jpeg;base64,' + data;
}

看看小提琴展示了两种可能的方法。JSFiddle作为的示例

相关文章：