从 C# 字节数组加载图像并使用 AngularJS 将图像放在 html 标记中

Question

我有一个字节数组形式的图像，我正在从以下 C# 方法转换字节数组

public HttpResponseMessage ReturnBytes(byte[] bytes)
{
  HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
  result.Content = new ByteArrayContent(bytes);
  result.Content.Headers.ContentType = 
      new MediaTypeHeaderValue("application/octet-stream");

  return result;
}

我的HTML源代码：

<div ng-app="myApp" ng-controller="myCtrl">

<div id="div_image"></div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("someurl")
    .then(function(response) {
        $scope.imageSrc = response.data;
        $('.div_image').html('<img src="data:image/png;base64,' + $scope.imageSrc + '" />');
    });
});
</script>

我关注的参考链接：

How to Get byte array properly from an Web Api Method in C#?
Display png image as response to jQuery ajax request

我无法在 HTML 视图中加载图像。请帮助我...

Answer 1

不要以字节数组的形式发送您的图像，而是 Convert.ToBase64String 字节数组并以文本形式发送。然后你的代码应该工作。

Answer 2

不使用 HttpResponseMessage() 方法，只需将字节数组转换为 Base64String 并将其作为 String 类型的响应发送回客户端.

C# 源代码：

[HttpPost]
public string GetCalculatorResults()
{
    byte[] imgArr = GetImageFromDataBase();

    // Here we are converting the byte array to Base64String
    return Convert.ToBase64String(imgArr)
}

HTML和AngularJS源代码应该是

<div ng-app="myApp" ng-controller="myCtrl">

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.imageSrc = "";
    $http.get("someurl")
    .then(function(response) {
        $scope.imageSrc = response.data;
    });
});
</script>

我测试了上面的代码，它运行良好。

从 C# 字节数组加载图像并使用 AngularJS 将图像放在 html 标记中

Load image from C# Byte array and place image in html tag using AngularJS

c#

image

bytearray

angularjs