2

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?

Community
  • 1
  • 1
Igor P.
  • 1,407
  • 2
  • 20
  • 34

1 Answers1

6

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+')'}">
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Not sure why but the '{{}}' worked well to specify the type i.e. data:image/{{img.type}} But not for the data itself. So we must use the concatenation only for the data – La masse Sep 28 '17 at 17:24