AngularJS：ng-class用于将动态base64编码的图像作为背景图像

Question

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?

Answer 1

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+')'}">