Ionic / AngularJS base64 image won't display

Question

I am trying to simply display a base64 image in an Ionic app.

The image won't display if I do this:

HTML:

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

Controller:

$scope.myImage= "/9j/4AAQSkZJ ...";

But the image WILL display if I just put the encoded string directly in the image element like this:

 <img ng-src="data:image/jpeg;base64,/9j/4AAQSkZJ ..."/>

I have checked every unsafe security setting, looked at dozens of other SO posts, etc. If I put this small example in a CodePen, it works both ways.

What could be happening to the $scope.myImage variable that would prevent it from binding to the image element? Is it an ionic thing? An angular issue?

Solution

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!

Comments

[lilbiscuit]

Interesting thought, but the timer had no effect.

[swapnesh]

@lilbiscuit Can you please paste your base64 encoded data ?

[lilbiscuit]

I have determined that there's a conflict somewhere in my app. If I start with a blank project I don't have this problem.