AngularJS - img ng-src for base64 data (not URL) not working

Question

I use openfb-angular (Facebook API library) to get me / image .
Returned data: "url" contains Base64 data here is the facebook documentation .

Here is my code:

Js

OpenFB.get('/me/picture', {format: 'json'}).success(function (imgData) { $scope.main.user.imageData = imgData; }); 

HTML

  <img ng-src="data:image/jpg;base64,{{main.user.imageData}}"> 

It does not work, and I get an empty img tag.

Where is my mistake?

Answer 1

Use the ng-source directive as follows:

 <img ng-src="{{'data:image/png;base64,'+main.user.imageData}}" > 

Hope this helps.

Answer 2

Use the data-ng-src directive as <img data-ng-src="{{data.image_url}}"> .

In your controller, set the base64 string as follows: $scope.data.image_url=<your base64 image source>

Hope this helps!

Answer 3

 <img data-ng-src="data:image/png;base64,{{main.user.imageData}}"/> 

Hope this helps.

Answer 4

In Angular 6, this will be:

<img [src]="data:image/png;base64, + main.user.imageData"/>