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[] 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 :

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

Is response.data in your http get success handler in JS code equal to the byte array in the result value returned from ReturnBytes method? — DenizEng
– DenizEng, Commented Feb 23, 2016 at 16:27

Ron Brogan · Accepted Answer · 2016-02-23 16:45:41Z

1

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

answered Feb 23, 2016 at 16:45

Ron Brogan

9011 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

B.Balamanigandan · Accepted Answer · 2016-02-24 11:22:00Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related