来自变量的 Ionic3 背景图像答案

【问题标题】：Ionic3 background-image from variable来自变量的 Ionic3 背景图像
【发布时间】：2017-11-20 22:22:30
【问题描述】：

我正在使用 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 完全失去了 style 标签

实验室/浏览器中的输出：

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

【问题讨论】：

标签： javascript css angular ionic2 ionic3

【解决方案1】：

改用属性绑定：

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

或

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

图像元素也应该这样做：

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

【讨论】：