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

Question

我有一个包含使用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;
}

- smartmouse

---

你有检查过 myImage 的值吗？ - Pranav C Balan

你设置了高度吗？ - Chellappan வ

两个问题都回答是。 - smartmouse

请提供问题的 StackBlitz。 - Jins Thomas Shaji

这是一个带有我的图片的 StackBlitz 链接：https://stackblitz.com/edit/angular-jzmbcs - smartmouse

Answer 1

我不知道为什么，但ngStyle会删掉它在URL中遇到的第一个分号。

我的神奇解决方案非常简单：

将此处

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

变成这样

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

在网址的开头添加分号 ;

- Mcgri

---

你真是太聪明了，花了两个小时的挖掘终于找到了原因。这是有史以来最好的解决方案！！！谢谢！ - André Machado

是的，我放弃了，只用了10分钟 :P 有时候使用丑陋的hack更加高效...你可以在同样的时间内完成更多的工作。 - Mcgri

Answer 2

尝试这样做：

像这样：

.ts

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

.html

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

.css

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

工作演示

- Adrita Sharma

---

我认为问题出在我的CSS上：我使用了em而不是px来设置宽度/高度。但是使用em却导致它无法正常工作...为什么呢？ - smartmouse

我认为 em 只用于设置字体大小。 - Adrita Sharma

即使使用 px 在我的情况下也无法工作：https://stackblitz.com/edit/angular-jzmbcs - smartmouse

Answer 3

我曾经和你一样遇到了同样的问题，但是我通过在图片扩展名后面使用双分号;;来解决它，就像这样：

data:image/jpg;;base64

由于某种原因，在Angular 9或之前，ngStyle指令中的字符串被呈现为没有分号的形式，例如data:image/jpgbase64。问题已经解决，但我仍然想知道为什么会出现这种情况。

- Miguel Trabajo