Wilt Wilt - 1 year ago 158
AngularJS Question

Loading image src using a variable containing base64 data in AngularJS

Loading image using variable containing
data in AngularJS

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

At first I just tried it like this:

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

where the image is a scope variable with a variable
containing the
data. This is actually working pretty well, the only problem is that I get a
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?


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

Working solution can be found HERE

Answer Source

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

<img data-ng-src="{{image.dataURL}}"/>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download