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

Qui*_*ens 3 background-image slide ionic2

我正在尝试使用<ion-slides page>做一个应用程序的介绍,我的问题是将图像设置为背景,我想在我的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>
Run Code Online (Sandbox Code Playgroud)

可以看到,第一张幻灯片应该显示图像,但是我得到的是: 在此处输入图片说明

感谢您的帮助!

Sur*_*Rao 5

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

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

您的html代码将具有:

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