Ionic 3 - 离子滑动内联 css

Question

我在主页上有 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 里面。这该怎么做？

Answer 1

您可以尝试如下图所示：

即用作backgroundImage属性绑定：

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