Как установить динамический путь в background-image: url ()

Question

это мой HTML-код, и я хочу установить динамический URL в моем моем background-image:

<div class="top-banner-bg" style="background-image: url({{ imageToShowURL }})">
</div>

и вот мой код в моем файле TS в угловых:

ngOnInit() {

    this.imageService.getHomePageBanner().subscribe(data => {
      if (data['ok']) {
        this.imageToShowURL = 'http://194.135.90.60/Back_end_Media/Media/Screenshot_from_2018-10-25_17-31-43.png';
      }
    }, error => {
      console.log(error);
    });
    }

но в моем HTML-коде этот стиль не работает.

как я могу решить эту проблему?

Answer 1

Вы можете использовать ngStyle, чтобы сделать это

<div class="top-banner-bg" [ngStyle]="{'background-image': 'url(' + imageToShowURL + ')'}"></div>

Answer 2

используйте свойство get для возврата стиля и используйте директиву ngStyle

<div class="top-banner-bg" [ngStyle]="getBackgroundStyle">

get getBackgroundStyle(){
    return {
        'background-image':'url(' + this.imageToShowURL  + ')'
    }
}