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.

[WholeEggz]

RC5 - same issue

[fastf0rward]

Well apparently ion-img should only be used in conjunction with virtualScroll:
a5bbbd5

[GeeKanJi]

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?

[JustasKuizinas]

I have this bug also in latest ionic

[fastf0rward]

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.

[JustasKuizinas]

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

[ventr1x]

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.

[JustasKuizinas]

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

[ventr1x]

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" />

[JustasKuizinas]

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

[JustasKuizinas]

@jgw96 any status update?

[rodrigoreal]

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

[fdambrosio]

I agree @nicolus the Ionic team don't realize that virtualscroll/ion-img is not working and that virtualscroll is not working with ion-refresh. @HugoHeneault @manucorporat @adamdbradley

[masimplo]

@HugoHeneault I haven't really worked with ion-img at all. I probably should have, but haven't. I can take a look but I don't have a reference on what is broken.

@nicolus the entry in the changelog is from a PR I submitted myself that fixes a regression issue in virtual scroll. I understand your frustration, but that PR fixed a particular issue with VS that made it unusable when the underlying data set was getting updated often, it was not a complete rewrite of the component that solved all issues.

I too agree that VS needs a lot more attention but it has two main issues that probably make its maintenance unviable:

1. Virtual scroll is a hard problem to solve in the first place. Very few frameworks/libraries have solved it successfully and with certain restrictions. Ionic VS tries to solve everything, variable item size, multi column, headers/footers per item, images, resizing etc. The existing implementation has gone through various refactoring cycles fixing bugs here and there many which are unrelated with the component it self (look at point 2 for more info)
2. Ionic virtual scroll interacts with many ionic components. Ion-img for images, infinite scroll for loading more data, content for scrolling etc. It is also supposed to render both ionic elements ion-item, ion-card etc as well as custom angular elements.

This complexity is too much for a PR to handle and it requires a complete redesign about what virtual scroll does (which means it has to align with ionic team's goals), how it does it and what interactions with other components it should have.

Moving to ionic v4 I think many of these will change (for one it will probably be able to render only other web components and not angular components inside it) like iron-list of polymer does today so not sure if putting in the effort in fixing the current implementation has any real value for people that will continue using ionic framework after its v4 release in their projects. I too am looking for options out of this rabbit hole as without virtual scroll we cannot compete with native applications in rendering a realistic amount of data.

[nicolus]

@masimplo : you're right, I forgot that virtual scroll is used for a lot more than just ion-img (because that's what I personally use it for).
I didn't mean to criticize this particular bugfix, I just wish we had more feedback from the team regarding this issue.

[RafaelKr]

I hope for a quick fix on this one. Are there any news? Is this investigated by the team?

[fdambrosio]

I hope in a fix too

[HugoHeneault]

@RafaelKr @fdambrosio I think it's better not to hope for any fixes on components before v4 is released. Unfortunately for us working with ionic3, we have to deal with buggy components or to fix them by ourselves. Feel free to fix & create PR ;)

[mat90c]

+1

[chandanch]

try using this way

<ion-img [src]="image.url" [alt]="image.alt">

[miqmago]

still waiting for a fix...

[RafaelKr]

You have to wait for ionic v4.

@miqmago: Please read here for further information:
https://blog.ionicframework.com/whats-the-issue-with-issues/

[miqmago]

#9660 (comment) worked

[husainsr]

I had same issue of showing image in inside [virtualScroll] how do i fix them.

[mopi1402]

You have to wait for ionic v4.

It would be stupid to believe that it will be fixed in Ionic 4.
We will have new bugs, but the team will focus on Ionic 5, then 6, leaving a lot of bugs for each new version.
On the side of React, there is a risk of breaking changes in each version, but at least we know what to expect.
Very disappointed by Ionic... It's unworthy to let bugs drag for so long and let users fix them.

[HugoHeneault]

@mopi1402 I know that how issues have been handled by ionic team in the past isn't really good. But if you want to learn how they will handle versioning and upcoming issues, you should read
https://blog.ionicframework.com/whats-the-issue-with-issues/
https://blog.ionicframework.com/ionic-semantic-versioning-release-schedule-and-lts/

Don't forget that ionic framework is open sourced and that anyone can help fixing issues. :)

[vahidvdn]

@mopi1402 If you are an Angular developer, I suggest Nativescript instead of react-native.
Here you can find why Nativescript is better than react.

[fdambrosio]

I agree @mopi1402 this is one of the most used feature

[vahidvdn]

Still not working in v4 beta.

[fdambrosio]

it's no good that it's not working with Ionic 4

[HugoHeneault]

Ionic is an open source software guys, if you want things to get fixed quickly you can create a patch and submit a PR 👍

[nicolus]

@HugoHeneault : It's open source software that I pay $29 a month through my pro subscription (I mean sure the framework itself is free, but it's not like they're a non-profit organization, they give the framework for free on order to make money on subscriptions), so I don't expect to have to fix it myself for free.

I can understand that it's a hard issue to fix, that ionic 4 is still beta, that it's a low priority issue... All those are perfectly valid reasons, but "it's OSS fix it yourself lol" is not.

[HugoHeneault]

@nicolus You're quite right, and I've also been complaining when the services I pay for were not working. But we should keep in mind that even if Ionic company might be making money from premium services, many devs from their teams are working a lot and need to earn their living... for a free tool that anyone can use without paying.

For me it's the way OSS work: you have no obligation on paying their services and can create awesome apps without giving a cent, but they provide services to make your life easier. I'm also paying for many pro subscriptions which doesn't mean I can't help when a fix is possible without spending days on it.

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#148