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

Question

有人设法使用 ng-class 将动态 base64 编码图像作为 div 的背景图像吗？似乎适用于 JQuery（请参阅 Is there a way to set background-image as a base64 encoded image in javascript?），但我还没有找到适用于 AngularJS 的任何解决方案。我的这个方法好像不行：

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

dynamicImage 保存通过 REST 网络服务动态加载的 base64 图像字符串。知道这是否有效以及如何实施？

Answer 1

不要在 ng-style 内使用 {{}} 插值，这会在计算该表达式时抛出 $parser 错误。只需在 ng-style.

中进行 string 连接

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

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

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

html

javascript

css

angularjs

ng-style