Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/amazon-web-services/14.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ionic2 在离子幻灯片中将图像设置为背景_Ionic2_Background Image_Slide - Fatal编程技术网

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

Ionic2 在离子幻灯片中将图像设置为背景,ionic2,background-image,slide,Ionic2,Background Image,Slide,我正在尝试为一个带有的应用程序做一个介绍,我的问题是设置一个图像作为背景,我正在尝试在我的HTML上这样做: <ion-header> <ion-navbar> <ion-title>Intro</ion-title> </ion-navbar> </ion-header> <ion-content padding> </ion-content> <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>

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


谢谢你的帮助

您的背景图像路径不正确

图像应保存在
/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)">

你是说你得到的是背景色而不是图像?