CODEWITHSUNDEEP
imageionic-frameworkloading
Manas
Manas

Reputation: 3330

Ion slides not showing images

I am using ionic and firebase. When i try to load a page with ion slides. the image is not showing even after waiting for a while. For example It works fine if I show the image in an img tag:

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

But when I tried the same way inside ion-slides like below it didn't show the image even after staying on the page for a long time. It only shows if i go back and come back to the page again. 

<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>

Upvotes: 0

Views: 1657

Answers (1)

sunil kalwani
sunil kalwani

Reputation: 826

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>

Upvotes: 1

Related Questions