Ionic slide with *ngFor not working

Ionic Framework ionic-v3
1

Hey,
I have the following code:

<ion-slides>
    <ion-slide>
       <ion-img src="{{imageLinks[0]}}"></ion-img>
    </ion-slide>
    <ion-slide *ngFor="let item of imageLinks">
       <ion-img src="{{item}}"></ion-img>
    </ion-slide>
</ion-slides>

imageLinks is an Array of strings with url’s for the images. The first slide, where I use the link hardcoded with

<ion-img src="{{imageLinks[0]}}"></ion-img>

is working fine and shows the image. Using the *ngFor loop is not working and I don’t have any ideas, why. When I use it outside the slider I get the same problem. I get 28 grey images (approx. 10px * 10px). (28 = imageLinks.length)

59
Bildschirmfoto 2017-08-18 um 14.54.59.png752×952 91.9 KB

My ionic info output:

cli packages:

@ionic/cli-utils  : 1.8.1
ionic (Ionic CLI) : 3.8.1

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.0.1
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.5.0

System:

Android SDK Tools : 26.0.2
ios-sim           : 6.0.0 
Node              : v7.10.0
npm               : 5.3.0 
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b
1 Like
2

Can you give me the result of :

<ion-slide *ngFor="let item of imageLinks">
   <div>{{item}}</div>
</ion-slide>

And if you try with :

<ng-template let-item ngFor [ngForOf]="imageLinks"> 
    <ion-slide>
       <ion-img src="{{item}}"></ion-img>
    </ion-slide>
</ng-template>

Does it work ?

3

it displays the string for the url.

It works like my ngFor loop.

4

If you inspect your html, what is the difference between sources of the first ion-slide :

<ion-slide>
   <ion-img src="{{imageLinks[0]}}"></ion-img>
</ion-slide>

And the second ?

<!-- The first loop of this one -->
<ion-slide *ngFor="let item of imageLinks">
   <ion-img src="{{item}}"></ion-img>
</ion-slide>

Did you try with :
Import public domSanitizer: DomSanitizer to your **.ts
Use this for your img :
[src]="domSanitizer.bypassSecurityTrustUrl(item)’’

And what happends if you only use <img/> instead of <ion-img></ion-img> ?

5

You can do in this way. If its not necessary to use ion-img.

<ion-slides pager="true" paginationType="bullets" >
    <ion-slide *ngFor="let item of imageLinks">
        <img src="{{item}}" />
    </ion-slide>
</ion-slides>
1 Like
6

Hi, @nilsleistner

Could you try

 <ion-slides [options]="mySlideOptions">
    <ion-slide *ngFor="let slide of slides">
      <img [src]="slide.MediaUrl">
    </ion-slide>
  </ion-slides>

component file

slides:any[];
  mySlideOptions = {
    pager:true
  };
this.slides=[{
                 MediaUrl:'img/abc.jpeg'
               },
               {
                 MediaUrl:'img/xyz.jpeg'
               }]

Thanks

7

@jguedon, @DwlRathod

Changing ion-img to img worked! Thank you so much for your immediate help!

8

If it worked then please accept answer as solution. That will be helpful :slight_smile: