Loading image src using a variable containing base64 data in AngularJS

Question

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

Wain

Answer 1

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

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

Sticktight

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 like me, you might have to manually format it this way. – Duckett

@kermit666 The ":" token is giving me troubles. How did you solved it? – Taxable

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? – Alleyway

Answer 2

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}}}"

Karynkaryo