来自变量的Ionic3背景图像

Question

I am using ngFor to output an array of posts. Each should have a background image. getBackgroundStyle extracts the URL of the image from the post (which is an array)

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

Now, interestingly after building, the img tag works fine, while the div looses the style tag completely

Output in lab/browser:

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

Answer 1

Use attribute binding instead:

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

or

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

And the same should be done with the image element:

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