RC4 ion-img doesn't correctly work with virtualScroll

[pavimus]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When you use virtualScroll and ion-img, after scrolling down (when buffer ends) ion-img stops loading images

Please look at code inspector:

url http://base247.lin2/thumbs/c6/files_56_222bf7a3335ce7c20553f0f374eb0266b871af41.jpg_mobileListImage_1412346660_3.jpg

is correct (for my local machine) and image is available.

Expected behavior:
ion-img must load images

Steps to reproduce:

Related code:

<ion-content>
    <ion-refresher (ionRefresh)="dataService.refresh($event)">
    <ion-refresher-content
        pullingText="Потяните для обновления"
        refreshingText="Загрузка">
    </ion-refresher-content>
</ion-refresher>
    <ion-list [hidden]="(works|filterWorks:filter.price.mode:filter.price.from:filter.price.to:filter.price.currency_id:filter.location.mode:filter.added.mode:sort.orderBy:commonData).length==0" [virtualScroll]="works|filterWorks:filter.price.mode:filter.price.from:filter.price.to:filter.price.currency_id:filter.location.mode:filter.added.mode:sort.orderBy:commonData" approxItemHeight="80px" >
    <ion-item-sliding *virtualItem="let work">
        <button ion-item (click)="goWork(work)" [ngClass]="{'work-list-item-selected':selectedWorks.works[work.id]}">
            <ion-thumbnail item-left>
                                    <ion-img [src]="work.image|defaultImage"></ion-img>
                            </ion-thumbnail>
                        <h3>{{commonData.authors[work.author_id]?.title}}</h3>
            <h5>{{work.title}}</h5>
            <p class="work-list-price">{{work.price | price : work.price_currency_id : commonData.currencyExchangeRate : true}}</p>
            <p>{{work.year ? work.year+',':''}} {{work.techniques | techniques : commonData.techniques : commonData.mainLanguageId}}</p>
        </button>
        <ion-item-options side="left">
            <button ion-button icon-only color="primary" (click)="selectedWorks.toggle(work)">
                <ion-icon name="{{selectedWorks.works[work.id] ? 'checkmark-circle':'radio-button-off'}}"></ion-icon>
            </button>
        </ion-item-options>
        <ion-item-options side="right">
            <button ion-button icon-left color="primary" (click)="sendWorkByEmail(work)">
                <ion-icon name="mail"></ion-icon>
                Email
            </button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>
</ion-content>

Other information:

Bug appeared in RC4, in RC3 all was OK.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v4.2.6
Xcode version: Not installed

[agrt56]

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

[naveedahmed1]

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

[tomaszczechowski]

Same issue on my end

[sajTempler]

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

[filipsuk]

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

[naveedahmed1]

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

[sajTempler]

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

[flolovebit]

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:)

[jgw96]

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

[naveedahmed1]

@jgw96 I emailed you a sample

[GeeKanJi]

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

[pantonis]

Same here. Was this fixed?

[GeeKanJi]

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

[fastf0rward]

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.