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 }}" />
Improve this question

1 Answer 1

Reset to default
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

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

3 Comments

Here you are using one property data, its a Base64 String ?
Actually it's just wrapping the dataobject with the correct data:image/jpeg;base64, prefix. About your problem i notice you use image.Content - be aware that JS is case sensitive.
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 <img ng-src="data:image/jpeg;base64,{{ image.Content }}" />. So, it degrades the performance. Now I'm sending the Byte array imgArr instead of Convert.ToBase64String(imgArr).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.