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

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         


        

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.