AngularJS - img ng-src to base64 data (not url) not working

Question

I'm using openfb-angular (Facebook API library) to get me/picture.
The return data is "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's not working and I get an empty img tag.

Where is my mistake?

Answer 1

Use ng-source directive like this:

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

Hope this helps.

Answer 2

Use data-ng-src directive like this <img data-ng-src="{{data.image_url}}">.

In your controller set base64 string as this: $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.