I have the same issue with my app since updating to rc4.

I am facing the similar issue with RC 4, in RC 3 it was working fine.

Same issue on my end

try using just "img" instead of "ion-img". Worked for me.

"ion-img" stopped working for me in rc4, too (even without virtual scroll). Could replacing with "img" cause some performance issues in longer lists?

@sajTempler yes it works but we loose the performance benefits such lazy loading that comes with ion-img

You can still use ng2 lazy loader. There are two or more. I'm using this one https://github.com/tjoskar/ng2-lazyload-image

Ciao folks,
ion-img work fine only if the tag is in the visible content., every List, segment an so on ....doesn't work .
My temporary fix:

1. open node_modules/ ionic-angular/component/img/img.js

2. change the function ngAferContentInit with:

   Img.prototype.ngAfterContentInit = function () {
   var _this = this;
   this._img = this._elementRef.nativeElement.firstChild;

   if(!this._img.hasAttribute("src")){
   
   
       this._img.src=this._elementRef.nativeElement.getAttribute("src");
   
   }
   
   this._unreg = this._platform.addEventListener(this._img, 'load', function () {
       _this._hasLoaded = true;
       _this.update();
   }, { passive: true });
   

   };

I hope in quickly fix by Ionic team:)

Hello all! Thanks for using Ionic! Could someone post a repo that i can use to reproduce this issue?

@jgw96 I emailed you a sample

Do you still have the problem? The "ion-img" does not work as expected on my app, but I can not find an explanation for the moment

Same here. Was this fixed?

@naveedahmed1 Could you post your sample here? I'm not sure we're talking about the same problem

We also ran into this issue with our non-virtualScroll grid. We reproduced the issue in a plunker. Seems to work fine in a finite (non-virtualScroll) list. Whenever we add ion-infinite-scroll to the list the ion-images show issues with loading and unloading.

So 'normal' lists seem to work just fine. Lists with virtualScroll or infiniteScroll seem to have issues.

RC5 - same issue

Well apparently ion-img should only be used in conjunction with virtualScroll:
https://github.com/driftyco/ionic/commit/a5bbbd55cbd0e256614b6a1062aabbab4b1f21bd

I have exactly the same behavior as @pavimus

After the virtual scroll buffer, image does not appear, css class is "img-unloaded" (see screenshot below)

with ionic 2 final. Please, could you communicate on this problem?

I have this bug also in latest ionic

As we really needed this to work in our scrollable grid of images (ion-grid, without virtual scroll), we have temporarily replaced the <project_root>/node_modules/ionic-angular/components/img/img.js file in our project with this gist.

After some digging around it appears that the _top_ and _bottom_ of an ion-img are not relative to the absolute top of the container it is in, causing the wrong images to be loaded/unloaded. See lines 231 and 242 of the gist for the workaround.

We also tried extending ion-img, but without much success. And building a (temporary) custom version of the Ionic dist files and using that as a local dependency also appears to be more complicated than we thought. So while the Ionic team works on this, we will be using this workaround.

@sajTempler Is it possible to load images only when scroll stopped with that plugin?

This bug and some more (images not responsive and only 5x5 on chrome/android, images not loading on first start before any scrolling..) broke a production app which heavily relies on showing articles with lazy loaded images.
Nice that we get no documentation whatsoever on such changes. Not that this is anything news.

@ventr1x I also wonder what devs are doing because this critical bug is still open from december 16

It's just plain broken (it never really worked, in beta it wasn't even mentioned in any doc).

I switched to ng2-lazyload-image and got it working with rc6 like that (so some might not go through the same non documented things..):

Component

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  templateUrl: 'image-modal.html'
})
export class ImageModal {
  @ViewChild(Content) content: Content;

  constructor() {
  }

}

View
<img [src]="img" [lazyLoad]="img" [scrollObservable]="content.ionScroll" />

@ventr1x Is it possible to load images only when user stopped scrolling with this plugin?

@jgw96 any status update?

Same problem here..
If i put the ion-img inside a segment it won't load.
http://plnkr.co/edit/Zb2EQQVCFgdyZ1CRfPsW?p=preview

can easily reproduce with Ionic 3.1.1 here https://github.com/shprink/ionic-withwebworker-vs-withoutwebworker

Though this isn't related to the issue, @shprink have you found any way to run complete ionic app from webworker?

Have not tried anything like this yet @naveedahmed1

Ok, the link you shared had webworker in url so I thought you might have tried it. I just checked you are using service workers. But unfortunately service workers aren't supported on device whereas web workers work on device as well.

ion-img within a virtual scroll is supposed to load the img in a web worker that's why it is in the title.

I replaced ion-img with img and it works fine within the virtual scroll use img instead of ion-img

The doc says that one should use ion-img for performance reasons, see: https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

Therefore, going for imginstead of ion-img cannot be a permanent solution and I hope that this long standing bug will be fixed soon.

@manucorporat Any progress on this issue, yet?

+1

I also had this issue. The bug is the calculation of the img::top and img::bottom in ion-img. This will be used to set the flag canRequest and canRender in Content::updateImgs for ion-img while scrolling.
My first workaround was to extend ion-img for virtual lists.

import {Component, ElementRef, Renderer, Optional} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

Another option is to fix the calculation in Content::imgsUpdate by override this function in your page.

import {updateImgs} from "ionic-angular/components/content/content";
import {Component, ViewChild} from "@angular/core";
import {Content} from "ionic-angular";

@Component({
  templateUrl: 'virtual-list.html',
})
export class VirtualListPage {
  @ViewChild(Content) _content: Content;
  ngAfterViewInit(){
    if(this._content) {
      this._content.imgsUpdate = () => {
        if (this._content._scroll.initialized && this._content._imgs.length && this._content.isImgsUpdatable()) {
          // reset cached bounds
          this._content._imgs.forEach((img:Img)=>img._rect = null);
          // use global position to calculate if an img is in the viewable area
          updateImgs(this._content._imgs, this._content._cTop * -1, this._content.contentHeight, this._content.directionY, 1400, 400);
        }
      };
    }
  }
}

DavidWiesner thanks for the answer
i'm new in ionic and angular ( testing ionic vs react native in fact )

in which file I have to past this please ? in app.components.ts ?

@DavidWiesner, Thanks for the solution. Can you provide us an example? I'm stuck with the updateImgs() function

@alainib

for the first workaround

you have to create a new file e.g. src/components/virtual-ion-img.ts this new component than has to register in src/app/app.module.ts

import {VirtualIonImg} from "../components/virtual-ion-img";
...
@NgModule({
    declarations: [
        //... all other pages and components,
        VirtualIonImg
    ],
//... all other stuff e.g.: imports, providers
    entryComponents: [
        //... other pages and components,
        VirtualIonImg
    ]
})

Than you can use the tag <virtual-ion-img [src]="url"></virtual-ion-img> in place of <ion-img> like described in http://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/#images-within-virtual-scroll

for the second workaround

Just edit the typescript page file which has an virtual scroll inside and add the imports, the ViewChild stuff and the method ngAfterViewInit.

@kabus202 I edited my comment and add the missing import statement. The function updateImgs is defined in the ionic angular content package and has to be imported.

@DavidWiesner The first workaround works better, but I still see stale images in place of images that do not load.

@DavidWiesner : Thanks a lot ! Your first workaround seems to be working perfectly for me (in a very simple example I built to convince myself that I was not crazy and that VirtualScroll was indeed broken), I'll try it in a real life app now.

Could you maybe make a pull request to fix the actual Ionic _Img_ component ?

@DavidWiesner thanks for the explanation.
I still have trouble sorry (i'm new and trying react/ionic/nativscript in same time)

this is what i do :

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import {VirtualIonImg} from "../components/virtual-ion-img";


@NgModule({
  declarations: [
    MyApp,      AboutPage,      ContactPage,        HomePage,       TabsPage
    VirtualIonImg
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,  AboutPage,      ContactPage,    HomePage,TabsPage
    VirtualIonImg
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

virtual-ion-img.ts

import {Component, ElementRef, Renderer, Optional} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

my view

<ion-content padding>
  <h2>Ionic List items</h2>
    <ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item">
            {{ item.i }}
            <virtual-ion-img [src]="item.src"
                 alt="item.image"  height="200" width="300" >
            </virtual-ion-img>
        </ion-item>
    </ion-list>

  FIN
</ion-content>

i have this error :

[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of
       date.
Error: Template parse errors:
Can't bind to 'src' since it isn't a known property of 'virtual-ion-img'.
1. If 'virtual-ion-img' is an Angular component and it has 'src' input, then verify that it is part of this module.
2. If 'virtual-ion-img' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this componen
t to suppress this message.
 ("
        {{ item.i }}

        <virtual-ion-img [ERROR ->][src]="item.src"
             alt="item.image"  height="200" width="300" >
                </virtual-ion-img>
"): HomePage@16:25

what i'm missing please ?

@alainib Maybe you need to use [src]="item.src" instead of src="item.src

kabus202 . thanks for help. the error i get is with [src] , i tryed both but i paste wrong html code her ;)

with 'src' i get this error

typescript: ..._amap/react-native-compare-ionic2-master/ionic/src/components/virtual-ion-img.ts, line: 14
Supplied parameters do not match any signature of call target.

            __dom: DomController) {
  super(__elementRef, __renderer, __plt, __content, __dom);

ngc failed: Failed to transpile TypeScript

@alainib which version of ionic do you use? In 3.2 the constructor of Img was changed. Before Ionic 3.2 you have to add NgZone as another parameter to the constructor.

VirtualIonImg before Ionic 3.2

import {Component, ElementRef, Renderer, Optional, NgZone} from "@angular/core";
import {Img, Platform, DomController, Content} from "ionic-angular";

@Component({
  selector: 'virtual-ion-img',
  template: '<img>'
})
export class VirtualIonImg extends Img {
  constructor(private __elementRef: ElementRef,
              __renderer: Renderer,
              __plt: Platform, 
              __zone: NgZone,
              @Optional() private __content: Content,
              __dom: DomController) {
    super(__elementRef, __renderer, __plt, __zone, __content, __dom);
  }

  get top(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.top + this.__content.scrollTop - this.__content._cTop;
  }
  get bottom(){
    this._rect = (<HTMLElement>this.__elementRef.nativeElement).getBoundingClientRect();
    return this._rect.bottom + this.__content.scrollTop - this.__content._cTop;
  }
}

It's been six months, why hasn't it been fixed?

@WangRongda Did you submit a PR that should have been accepted that fixes this?

@janpio Magically, it display normally right now. I has been in trouble several days becouse the ion-img can't display normally.Sorry.

Still have the issue, in a list with ~200 items with remote images, the images either not loading or are scrambled (images from previous items are on a current item). Any idea how to fix this? I tried the solution with virtual-ion-img and didn't worked

@dspachos as I understand ionic team mentioned that fixing virtual scroll bugs is not a priority for them at the moment, try to use infinite-scroll instead.

@JustasKuizinas But infinite-scroll is not the solution. At the end, all items are in the DOM. So there are lots of memory issues especially in iOS.

There was similar problems in ionic1.x. I thought all of them is fixed in ionic2 or 3. Unfortunately there is no solution.

@vahidvdn it's not the solution but ionic team themselves said it's best option right now till virtual scroll is fixed :)

@JustasKuizinas I hope they make a fix for this problem.

But there is a good library called vs-repeat (for both angularjs and angular). I tested for angularjs. It's really awesome, but have a lot of lags while scrolling in iOS.

I don't know what is the priority for ionic team, but virtualScroll is one of the most important components that real world apps use.

@vahidvdn Totally agree with you, I'll finish my current app using Ionic, but I've decided that for my next app I'll use another framework (React Native probably or Native script). The Ionic team is doing great work, but the framework is having performance issues. In my current app, I ended up with a static list of maximum 50 items with images (due to the virtual scroll bug) and when I press the Back button there is a lag (I simple use popView, the default behaviour). This lag is not present for example when my lists have 15-20 items.
Moreover, in iOS when the device is in battery save mode (and the CPU probably is slowing down things) the performance is even worse, almost not usable.

@dspachos few months ago I also thought oh it's virtual scroll it must be top priority to make it work like a charm so I chose ionic instead of nativescript, but now it's sad to hear that it's still broken and we cant get lag free performance with huge lists of data.

I'm had the same issue, but I know that my lists will have less than 150 items. I tried to use img instead of ion-img and it works fine without performance lose. I lost some time trying to solve with ion-img but actually not all lists needs this resource.

@diegomachado1 Are you sure your images are in their right position? Please slow down your network connection, then test again. When some images don't get loaded, previous images come to their places and conflict with each other.

2017-08-16 and ionic 3.6 and problem still exists.
In my case I apply second fix (posted upper) and it works.

@decpio Would you please tell us what exactly you did?

ok,

I added to my broken page:
import { Component, ViewChild } from '@angular/core';
import { updateImgs } from 'ionic-angular/components/content/content';
import { Img } from 'ionic-angular/components/img/img-interface';
import { Content } from 'ionic-angular';

/* 2017-08-16 - add this to class body
    start FIX#9660 ion-img doesn't correctly work with virtualScroll
    https://github.com/ionic-team/ionic/issues/9660#issuecomment-304840427
*/
@ViewChild(Content) _content: Content;
ngAfterViewInit() {
    if (this._content) {
        this._content.imgsUpdate = () => {
            if (this._content._scroll.initialized && this._content._imgs.length && this._content.isImgsUpdatable()) {
                // reset cached bounds
                this._content._imgs.forEach((img: Img) => (<any>img)._rect = null);
                // use global position to calculate if an img is in the viewable area
                updateImgs(this._content._imgs, this._content._cTop * -1, this._content.contentHeight, this._content.directionY, 1400, 400);
            }
        };
    }
}
/*
end FIX#9660
*/

and thats it - problem disappear.
My broken page:

decpio on 16 Aug 2017

👍8 ❤2 🎉2