离子滑动不显示图像

时间:2017-07-12 06:44:16

标签: image ionic-framework loading

我正在使用离子和firebase。当我尝试加载带有离子幻灯片的页面时。即使等待一段时间后,图像也不显示。例如,如果我在img标签中显示图像,它可以正常工作:

<div style="width:100%; height:150px;> 
  <img src={{data.image1}}>
</div>

但是当我在下面的离子幻灯片中尝试相同的方式时,即使长时间停留在页面上也没有显示图像。它只显示我是否返回并再次返回页面。

<ion-slides  class="slider" pager="true" paginationType="bullets">
  <ion-slide>
            <img src="{{data.image1}}" (click)="expand_image(data.image1)">

  </ion-slide>
  <ion-slide *ngIf='data.image2'>
            <img src="{{data.image2}}" (click)="expand_image(data.image2)">
  </ion-slide>

    <ion-slide *ngIf='data.image3'>
            <img src="{{data.image3}}" (click)="expand_image(data.image3)">
  </ion-slide>

    <ion-slide *ngIf='data.image4'>
            <img src="{{data.image4}}" (click)="expand_image(data.image4)">
  </ion-slide>

    <ion-slide *ngIf='data.image5'>
            <img src="{{data.image5}}" (click)="expand_image(data.image5)">
  </ion-slide>


    <ion-slide *ngIf='data.image6'>
            <img src="{{data.image6}}" (click)="expand_image(data.image6)">
  </ion-slide>

    <ion-slide *ngIf='data.image7'>
            <img src="{{data.image7}}" (click)="expand_image(data.image7)">
   </ion-slide>

    <ion-slide *ngIf='data.image8'>
            <img src="{{data.image8}}" (click)="expand_image(data.image8)">
    </ion-slide>

    <ion-slide *ngIf='data.image9'>
            <img src="{{data.image9}}" (click)="expand_image(data.image9)">   
    </ion-slide>


    <ion-slide *ngIf='data.image10'>
            <img src="{{data.image10}}" (click)="expand_image(data.image10)">
  </ion-slide>


</ion-slides>

1 个答案:

答案 0 :(得分:1)

you can try this
  <ion-slide-box options="options" slider="data.slider" class="clubslide">
        <ion-slide style="color: white;">
          <img class="full-image" src="{{data.image1}}">
        </ion-slide>
       <ion-slide style="color: white;">
          <img class="full-image" src="{{data.image2}}">
        </ion-slide>
        <ion-slide style="color: white;">
          <img class="full-image" src="{{data.image3}}">
        </ion-slide>
      </ion-slide-box>