0

I'm building an AngularJS Application, for Service I'm using .NET C# for coding purpose. Now I'm following the Code Structure as mentioned in the following Post Load image from C# Byte array and place image in html tag using AngularJS -

But in the said approach they are sending the Image as a Base64 Sting and here we are binding the Base64 in Angular HTML. It degrades the performance of loading. In one of my post I got an relevant answer Compress a Byte Array Image without Scaling using .Net C#, it stated "Send the data usual instead of Base64" string.

Kindly assist me how to display a Byte Array Image in HTML <img /> Tag. Currently I'm using the following

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

1 Answers1

0

Call binary image data through a controller function like this (as a possible solution, please see the link to Fiddle). 

<img data-ng-src="{{getImage(image.Content)}}" />

$scope.getImage = function(data){
    return 'data:image/jpeg;base64,' + data;
}

Have a look at the fiddle showing 2 possible approaches. JSFiddle as example

daan.desmedt
  • 3,752
  • 1
  • 19
  • 33
  • Here you are using one property `data`, its a Base64 String ? –  Jul 29 '16 at 06:53
  • Actually it's just wrapping the `data`object with the correct `data:image/jpeg;base64,` prefix. About your problem i notice you use image.Content - be aware that JS is case sensitive. – daan.desmedt Jul 29 '16 at 06:54
  • Here the `image.Content` is a `Base64 String` - `Convert.ToBase64String(imgArr)` - Here the problem is I'm returning string to the Client and then I'm binding the Sting `image.Content` in the ``. So, it degrades the performance. Now I'm sending the Byte array **`imgArr`** instead of `Convert.ToBase64String(imgArr)`. –  Jul 29 '16 at 07:01