Angular：如何以编程方式将 Base64 图像设置为 div 的背景图像

Question

我有一个div使用 CSS 显示 Base64 图像的图片：

.my-image {
    background: url('data:image/jpg;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
}

现在这个图像可能会有所不同，因为我从后端检索它，所以我必须动态地更改它。

所以我删除了 CSS，并在组件中尝试了一些解决方案，如下所示：

<div [style.background]="'url(' + myImage + ')'"></div>

<div [ngStyle]="{'background-image':'url('+ myImage +')'}"></div>

还有其他一些...但没有一个起作用。

DomSanitizer我还使用以下一些方法对组件中的图像进行了清理：

this.sanitizer.bypassSecurityTrustResourceUrl(this.myImage)

但即使这样也没有效果:(

div您知道动态背景图像的工作方式吗？

现在这是我的CSS：

div {
  width: 3em;
  height: 3em;
}

Answer 1

我不知道为什么，但是 ngStyle 删除了第一个“;” 它在 URL 中遇到

我对此的绝妙解决方案非常简单：

转这个

[ngStyle]="{'background-image':'url('+ myImage +')'}"

变成这样

[ngStyle]="{'background-image':'url(;'+ myImage +')'}"

刚刚aad；作为 url 中的第一个字符