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.

// Controller which get my image and put into $scope.
function MyController($scope, $http, $location) {  

    var url = '/json/FindImage?id=1';  
    $http.get(url).success(function(result) {  
        $scope.image = result.Image;  
    }  
}  

// HTML
<!-- It doesn't work -->  
<img src="{{image}}" />  
<!-- It doesn't work also -->  
<img ng-src="{{image}}" />

Any idea? Thank you all!

shA.t · Accepted Answer · 2019-01-30 13:36:41Z

62

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\//);

edited Jan 30, 2019 at 13:36

shA.t

17k5 gold badges59 silver badges121 bronze badges

answered Jul 2, 2014 at 8:59

Assem-Hafez

1,05510 silver badges11 bronze badges

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

6 Comments

amdev Over a year ago

GET data:image/PNG;base64,etc.net::ERR_INVALID_URL for me

Hema Over a year ago

@Assem , even am getting net::ERR_INVALID_URL. What might be the issue.

amdev Over a year ago

@Hema, Yes actually i guess the issue was java side. Now on front side I have <img ng-src="data:image/png;base64,{{myresponsejsonobject.image}}"> and java side I have a ByteArrayOutputStream object which i convert in b64 like that byte[] imageBytes = baos.toByteArray();String b64 = Base64.encodeBase64String(imageBytes);baos.close(); Then put my string in a json.

Ciaran Gallagher Over a year ago

Hi @Assem-Hafez, where should the sanitisation filer be added?

Assem-Hafez Over a year ago

@CiaranGallagher this should go in your config angular.module('myApp').config(['$compileProvider', function($compileProvider) { $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//); } ]);

|

Anders Ekdahl · Accepted Answer · 2013-02-20 13:16:08Z

2

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.

answered Feb 20, 2013 at 13:16

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

Comments

Amir · Accepted Answer · 2018-05-13 13:42:06Z

0

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

answered May 13, 2018 at 13:42

Amir

1035 bronze badges

Comments

Xophmeister · Accepted Answer · 2013-02-20 12:30:17Z

-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.

answered Feb 20, 2013 at 12:30

Xophmeister

9,2495 gold badges52 silver badges99 bronze badges

Collectives™ on Stack Overflow

AngularJS - Show byte array content as image

4 Answers 4

6 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Linked

Related