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?

Here's what the HTML looks like when served: <img ng-src="data:image/jpeg;base64," src="data:image/jpeg;base64,"> — lilbiscuit
– lilbiscuit, Commented Jan 16, 2015 at 14:39

Bipin Bhandari · Accepted Answer · 2015-04-20 12:37:20Z

8

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!

answered Apr 20, 2015 at 12:37

Bipin Bhandari

2,69225 silver badges38 bronze badges

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

Comments

eladHayun · Accepted Answer · 2015-08-04 10:58:02Z

0

i had the same issue, solved it by configuring the main angular module with whitelisting this way:

angular.module('app').config(function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https|ftp|mailto|file|tel|data)/);})

answered Aug 4, 2015 at 10:58

eladHayun

2335 silver badges11 bronze badges

Comments

swapnesh · Accepted Answer · 2015-01-16 06:47:03Z

-2

Sometimes I too face the issue, and use setTimeout or $timeout.

setTimeout(function(){
   $scope.myImage= "/9j/4AAQSkZJ ...";
}, 2000);

In Angular way (add $timeout DI in controller)-

$timeout(function(){
   $scope.myImage= "/9j/4AAQSkZJ ...";
}, 2000);

answered Jan 16, 2015 at 6:47

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

3 Comments

lilbiscuit Over a year ago

Interesting thought, but the timer had no effect.

swapnesh Over a year ago

@lilbiscuit Can you please paste your base64 encoded data ?

lilbiscuit Over a year ago

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.

Abdulla Nilam · Accepted Answer · 2015-10-30 05:30:08Z

-3

just use ng-if at the div, and then the img tag gets rendered as soon as the data is loaded

edited Oct 30, 2015 at 5:30

Abdulla Nilam

39.7k18 gold badges85 silver badges115 bronze badges

answered Oct 29, 2015 at 12:12

user2834172

9011 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

Ionic / AngularJS base64 image won't display

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related