28

Loading image using variable containing base64 data in AngularJS

I am trying to find the right way to load a image source from a variable containing base64 encoded image data (for example pulled from a canvas using toDataURL(); ).

At first I just tried it like this:

<img src="{{image.dataURL}}" />

where the image is a scope variable with a variable dataURL containing the base64 data. This is actually working pretty well, the only problem is that I get a 404 error in my console. Something like this:

GET http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404 (Not Found)

Not so pretty. When I tried a more angular style solution like this: 

<img data-ng-src="image.dataURL" />

the images are not loading at all. I made a fiddle which you can find HERE

Any suggestions how to get rid of this error in my console?

EDIT:

Gruff Bunny was right. This <img data-ng-src="{{image.dataURL}}" /> is working...

Working solution can be found HERE

Wilt
  • 41,477
  • 12
  • 152
  • 203

2 Answers2

46

The content of the ng-src needs to be interpolated: Try this:

<img data-ng-src="{{image.dataURL}}"/>
Gruff Bunny
  • 27,738
  • 10
  • 72
  • 59
  • 11
    Note that the image has to be in the full Data URI scheme: `"data:image/png;base64,iVBORw0..."`. If you're using [angular-base64-upload](https://github.com/adonespitogo/angular-base64-upload/issues/21) like me, you might have to manually format it this way. – metakermit Mar 27 '15 at 20:40
  • @kermit666 The ":" token is giving me troubles. How did you solved it? – Sebastialonso Jun 09 '15 at 17:12
  • I've been having this problem all day. Still can't seem to get it no matter how I format it. This is in Ionic though. Any ideas? – mikeLspohn Jul 30 '15 at 04:28
-4

I admit I spent way too much time trying to fix similar problem,

my problem was I had extra brace here (see three braces at end):

 ng-attr-src="{{aad.form.imageBase64Temp}}}"
Erti-Chris Eelmaa
  • 25,338
  • 6
  • 61
  • 78