Load image from C# Byte array and place image in h

Question

I'm having an Image in the form of Byte Array, from that I'm converting Byte Array from the following C# method

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

My HTML Source Code:

<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>

Reference Links I have followed :

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

I Can't able to load the image in the HTML View. Kindly assist me...

Answer 1

Send your image not as a byte array, but Convert.ToBase64String the byte array and send as text. Then your code should work.

Answer 2

Instead of using the HttpResponseMessage() method, just convert the Byte Array to Base64String and send it back to the client as a Response of type String.

The C# Source Code:

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

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

The HTML and AngularJS Source Code Should be

<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>

I tested the above code, its working perfectly.