Set an image as background in ion-slide

天大地大妈咪最大 提交于 2020-07-20 17:24:33

问题


I am trying to do an intro for an app with < ion-slides page>, my problem comes to set an image as background, I am trying to do this on my 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>

As it can be seen, the first slide should show the image, but what I get is this:

Thanks for helping!


回答1:


Your background image path is incorrect.

The image should be saved in /src/assets/img/fondo.png. This is copied to /www/assets/img/fondo.png during the build process.

Your html code will have :

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



回答2:


For those using Ionic 2+ I think this syntax is what you're looking for:

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


来源:https://stackoverflow.com/questions/43913303/set-an-image-as-background-in-ion-slide

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!