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

Posted 2023-03-06

【中文标题】AngularJS：用于将动态 base64 编码图像作为背景图像的 ng-class

【英文标题】：AngularJS: ng-class for dynamic base64 encoded image as background-image

【发布时间】：2016-07-23 06:01:44

【问题描述】：

有人设法使用 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 Web 服务动态加载的 base64 图像字符串。知道这是否有效以及如何有效？

【参考方案1】：

不要在ng-style 内使用 插值，这会在评估该表达式时引发$parser 错误。只需在ng-style 内进行string 连接即可。

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

【讨论】：

不知道为什么，但“”可以很好地指定类型，即 data:image/img.type 但不适用于数据本身。所以我们必须只对数据使用连接