Wilt Wilt - 6 months ago 66
AngularJS Question

Loading image src using a variable containing base64 data in AngularJS

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

Answer

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

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