Search code examples
javascripthtmlcssangularjsng-style

AngularJS: ng-class for dynamic base64 encoded image as background-image

Anyone managed to use ng-class for placing dynamic base64 encoded images as background-images for a div yet? Seems to work for JQuery (see Is there a way to set background-image as a base64 encoded image in javascript?) but I haven't figured out any solution for AngularJS yet. This approach of mine does not seem to work out:

<div class="col-xs-2" ng-style="{'background-image':'url(data:image/jpeg;base64,{{dynamicImage}})'}">...</div>

dynamicImage holds the base64 image string which is loaded on the fly via a REST webservice. Any idea if this works at all and how?

Solution

  • Don't use {{}} interpolation inside ng-style that will throw an $parser error while evaluating that expression. Simply do string concatenation inside ng-style.

    <div class="col-xs-2" 
  ng-style="{'background-image':'url(data:image/jpeg;base64,'+dynamicImage+')'}">