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

尝试这样：

.ts

myImage  = 'data:image/jpg;base64, iVBORw0KGgoA.....';

.html

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

.css

div {
  height:500px;
  width: 500px;
}

Working Demo

Answer 2

我遇到了和你一样的问题，我在图片扩展名后使用双分号 ;; 解决了这个问题，如下所示：

data:image/jpg;;base64

出于某种原因，在 Angular 9 或更早版本中，ngStyle 指令中的字符串在呈现时没有任何分号 like data:image/jpgbase64。问题解决了，但我还是想知道为什么会这样。

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

2 个答案: