Ionic 3 - 离子幻灯片内联 css答案

【问题标题】：Ionic 3 - ion-slide inline cssIonic 3 - 离子幻灯片内联 css
【发布时间】：2018-03-07 13:38:29
【问题描述】：

我在主页上有 Ionic3 App 和 ion-slides 组件。

<ion-slides pager>
    <ion-slide *ngFor="let blog of blogs | async" >
      <h2>{{ blog.title }}</h2>
      <p>
      <a target="_blank" class="slider-read-more" ion-button outline color="secondary" (click)="blogDetail(blog)">ვრცლად</a>
      </p>
    </ion-slide>
  </ion-slides>

我想使用样式添加内联 css 背景图片

<ion-slide *ngFor="let blog of blogs | async" style="background:url(blog.image) no-repeat center center fixed;">

但不能通过 blog.image 里面。如何做到这一点？

【问题讨论】：

标签： css angular typescript sass ionic3

【解决方案1】：

你可以试试如下图：

即使用backgroundImage 作为属性绑定：

 <ion-slide [style.backgroundImage]="'url(' + blog.image + ')'"> ...

【讨论】：

我已经编辑了答案，你现在可以试试@GochaGochitashvili 吗？
太棒了。我们都必须感谢@sebaferreras 感谢Sebaferreras :)
Np，很高兴为您提供帮助 :)

【解决方案2】：

我使用 ngStyle 指令来设置 ion-slides 样式。 v-3.0

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

【讨论】：