ionic3中 轮播自动切换效果图片显示不出来是什么问题

Question

html:
<ion-slides pager autoplay="600" speed="800" loop="true" autoplayDisableOnInteration="true">

<ion-slide>
  <img src="assets/img/banner.jpg"/>
</ion-slide>
<ion-slide>
  <img src="assets/img/2.png" />
</ion-slide>

</ion-slides>

ts:
import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

export class HomePage {

@ViewChild(Slides) slides: Slides;

ionViewWillEnter(){

this.slides.startAutoplay();

}

ionViewWillLeave(){

 this.slides.stopAutoplay();

}
}

sass:
ion-slides {

    width:100%;
    height:pxToRem(375);
   // border:1px solid #f00;
    ion-slide {
        width:100%;
        height:pxToRem(375);
       // border:1px solid blue;
        img {
            width:100%;
          //  border:1px solid #333;
        }   
    }
}

Answer 1

这个自带的轮播插件有个很奇怪的问题，图片如果从本地加载的话是可以加载出来的，但是如果是从后台接口动态获取的，图片就加载不出来 ，必须判断是否从后台接口里获取到了img数据列表才能显示就是这个判断*ngIf="len>1"
<ion-slides *ngIf="len>1" #Slides pager autoplay="1000" speed="600" (ionSlideAutoplayStop)="auto()" loop="true" autoplayDisableOnInteration="true">

     <ion-slide  *ngFor="let sl of banner">
        <div class =“swiper-zoom-container”>
            <img src="{{sl.imageUrl}}">
        </div>
    </ion-slide> 
</ion-slides>     

//页面进入的时候开启自动播放（这里也要做判断ngIf="len>1",不然会报startAutoplay（）函数未定义），以下情况也是一样的
 ionViewDidEnter(){
 this.flag = false;
 if(this.len>1){
    this.slides.startAutoplay();
}

}

//页面离开的的时候停止自动播放
ionViewDidLeave(){

 this.flag = true;
 if(this.len>1){
   this.slides.stopAutoplay();
 }

}

  
//这个方法就是用户操作过轮播图之后，自动播放的效果就停止了，起到监听停止自动播放的事件，然后开启自动播放

auto(){

if(this.len>1){
  if(!this.flag){
    this.slides.startAutoplay();
  }
}