在离子幻灯片中将图像设置为背景

Set an image as background in ion-slide

我正在尝试为带有 的应用程序做一个介绍,我的问题是将图像设置为背景,我正在尝试在我的 HTML:

<ion-header>

  <ion-navbar>
    <ion-title>Intro</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

<ion-slides pager>

  <ion-slide style="background-image: url(/../../www/img/fondo.png)">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: mediumpurple">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: mediumpurple">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>

可以看出,第一张幻灯片应该显示图像,但我得到的是:

感谢您的帮助!

您的背景图片路径不正确。

图像应保存在 /src/assets/img/fondo.png 中。 这在构建过程中被复制到 /www/assets/img/fondo.png

您的 html 代码将包含:

 <ion-slide style="background-image: url(../assets/img/fondo.png)">

对于那些使用 Ionic 2+ 的人,我认为这种语法就是您要找的:

<ion-slide *ngFor="let imgFile of imgList" [style.backgroundImage]="'url(../assets/image/' + imgFile)">