Ionic-framework: ion-img in ngFor doesn't render items when scrolled

[ghenry22]

Short description of the problem:

use ion-img for thumbnails in a ngFor generated list. images within the initial viewport render, when you scroll no new images are loaded.

What behavior are you expecting?

As you scroll new images are loaded

Steps to reproduce:

1. create a simple ngFor generated list with an image on each item
2. scroll down the list
3. no images outside the initial viewport are ever loaded

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

ion-img works correctly with virtualScroll generated lists and loads new images as scroll finishes. Just does not work with ngFor generated lists.

Which Ionic Version? 1.x or 2.x

2.x

Plunker that shows an example of your issue

just go to the ngfor segment and scroll down to see the issue

https://plnkr.co/edit/tvsPpUhLd94rtbrnZJ5W?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.1.1
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.4
Xcode version: Xcode 7.3 Build version 7D175

[ghenry22]

This isn't ios specific, problem is onbserved on ios and android devices and ionic serve or even just in the plunker attached.
It's more related to standard lists than virtualScroll as well.

[jccf091]

+1

[jgw96]

Hello all! So ion-img is actually mean to be used only with virtualscroll, so that is why you are seeing issues (: . we recommend using a simple native img element with standard lists.

[ghenry22]

Ah ok, it does seem like a good built in solution for lazy image loading if it was tweaked a bit.

For instance I use ion-Img in a slide to load an external image and it works great.

At a minimum maybe update the docs, perhaps as an enhancement request extend ion image to work in other areas to deliver lazy loading of images.

[jgw96]

@ghenry22 so yeah, its on our roadmap to investigate ion-img as a general lazy loading image element as you are right, it could be pretty useful. Also, i opened up an issue here on our docs repo which i will update when i have updated the docs https://github.com/driftyco/ionic-site/issues/581 . Thanks again!

[jgw96]

Reopening this as we have alot of ideas for using ion-img everywhere in an Ionic app.

[rossmartin]

@jgw96 This appears to be fixed in beta.9

I used to need a have a hack to fix this issue but it is no longer needed. I updated to beta.9 and no longer need it. Thanks 🍻

[nsuyog]

ion-img not rendered
If i used *ng-for on parent element then ion-img not rendered. I didn't used any virtualscroll.
Is this issue fixed on Ionic Version: 3.2.1

[ghenry22]

I believe that ion-img is still only supported within virtualscroll lists

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.