我正在使用离子和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>
答案 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>