AngularJS - Show byte array content as image

Question

I\'m searching into my database a image as a byte array. I want to show this content as file using the markup image, but it doesn\'t work here.

// C         


        

Answer 1

The src attribute of img points to the source file of the image, it doesn't contain the actual source data. You can't do what you want this way; instead, you would have to write an image decoder in JavaScript (e.g., https://github.com/devongovett/png.js), which outputs into a canvas element.

Answer 2

Make sure The Data you are returning to show as a image is converted to ToBase64String

In your C# code, Use Convert.ToBase64String(imageBytes) and in the view use this

Answer 3

Use ng-src in the following format

<img ng-src="data:image/JPEG;base64,{{image}}">

Don't forget to add a sanitization filter for data to not be marked as unsafe by angular:

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

Answer 4

If you can get your server to return the image in a base64 encoded string, you could use a data url as the src attribute.