В Angular 7 я не могу отобразить динамическое изображение как [style.background-image] - PullRequest
Новая
       26

В Angular 7 я не могу отобразить динамическое изображение как [style.background-image]

0 голосов
/ 04 июля 2019

В моем угловом приложении я загружаю динамические фоновые изображения из моего бэкэнда.

Показ фотографий не является проблемой.

Фоновые изображения не загружены, к сожалению, я не получаю сообщение об ошибке.

моя угловая версия - 7.3.8.

Я пробовал некоторые решения из stackoverflow и Интернета, но ничего не помогло

Макет - html: 

  <div *ngIf="headerImage" [style.background-image]="headerImage">

Layout-компонент: 

  ngOnInit() {<br/>
      this.setup = this.route.snapshot.data['setup'];
      this.createHeader(this.setup)
    }

   createHeader(setup: Setup){
      const tempImage = 'data:image/png;base64,' + this.setup.headerImage.data;
      this.headerImage = this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + tempImage + ')');
      console.log(this.headerImage);
      }

Вывод из моей консоли: 

  this.headerImage console.log: url(data:image/png;base64,iVBORw0KGgo.......

Я пытался 

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

а это 

   this.backgroundImg = sanitizer.bypassSecurityTrustStyle('url(....)'

Но ничего не работает.

Не знаю, что случилось? Я не получаю сообщения об ошибках, и изображение не является проблемой ... но мне нужен фон.

Спасибо за помощь!

1 Ответ

1 голос
/ 05 июля 2019

Похоже, что вы все сделали правильно, вы должны попытаться убедиться, что нет внешних факторов, которые могут вызвать проблему, возможно, элемент не имеет размера? Вы пробовали разные изображения? Вы пытались просто установить background: url(...) вместо backround-image: url(...). помните, что наследование стиля CSS может переопределять ваши вещи.

...