來自變量的Ionic3背景圖像

Question

我正在使用ngFor輸出帖子數組。 每個都應具有背景圖像。 getBackgroundStyle從帖子中提取圖像的URL（它是一個數組）

    <div class="singlePost" *ngFor="let post of data" (click)="itemTapped($event, post)">
        <div style="background-image: url('{{getBackgroundStyle(post)}}')">
            <img src="{{getBackgroundStyle(post)}}">

現在，有趣的是，構建之后，img標簽可以正常工作，而div完全松開了樣式標簽

實驗室/瀏覽器中的輸出：

<div class="singlePost">
    <div>
        <img src="http://theurl.com">

Answer 1

使用屬性綁定 ：

<div [ngStyle]="{ background-image: 'url(' + getBackgroundStyle(post) + ')' }"></div>

要么

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

並且應該對image元素執行相同的操作：

<img [src]="getBackgroundStyle(post)">