Loading image src using a variable containing base64 data in AngularJS
angularjs, base64, data-url, image, loading
Solution
The content of the ng-src needs to be interpolated: Try this:
<img data-ng-src="{{image.dataURL}}"/>
Problem
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