Angular: как программно установить изображение Base64 в качестве фонового изображения div - PullRequest
Новая
       61

Angular: как программно установить изображение Base64 в качестве фонового изображения div

0 голосов
/ 23 января 2020

У меня есть div, в котором я показываю изображение Base64, используя CSS: 

.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 с динамическим c фоновым изображением?

Вот мой CSS сейчас: 

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

1 Ответ

1 голос
/ 23 января 2020

Попробуйте так:

.ts 

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

. html

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

. css

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

Рабочая демоверсия

...