ionic-framework: ion-img in virtualScroll do not display images as expected

Ionic version: (check one with “x”) [ ] 1.x [ ] 2.x [X] 3.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: I’m using the ion-img as explained in the DOC, inside a virtualScroll, but the images are not shown in the first moment (grey box only). After a certain scroll, some images appear, and after scrolling a bit more, the images disappear another time.

Expected behavior: The images should be displayed when their element is visible on the screen.

Steps to reproduce:

Go to this plunker: http://embed.plnkr.co/WblnwO8P1lWgFW2TgVc1/

It’s a simple contacts list. Scroll a few contacts and you’ll see how images are shown.

Related code: As you can see the usage of the ion-img is as suggested in the DOCS:

<ion-content padding>

  <ion-list [virtualScroll]="items" approxItemHeight="100px">

    <ion-item *virtualItem="let item">
      <ion-img style="width:100px; height:100px" [src]="item.imgUrl"></ion-img>
      <span>
        <h1>{{item.name}}</h1>
        <p>{{item.phone}}</p>
      </span>
    </ion-item>

  </ion-list>

</ion-content>

Other information: For what I’ve been investigating, in the updateImgs function, in content.js file, the img.top value of all ion-images is the same (the position of the last one, something like 1900px). Same happens with the img.bottom (in fact, the problem is img._bounds).

That’s the reason why at some point of the scroll the images are shown, because at that moment the bounds of the img are between viewableBottom and viewableTop - renderableBuffer.

Anyway, the problem is that in the _getBounds method of img.js, there’s no this._bounds neither this._rect properties so the later is computed (and the result used from that moment forwards). When this value is computed, the value of the bounding client rect of each element is not the final one.

IMO the problem is that, some way, the bounds of the ion-img should be related (they are not, at this moment) with the bounds of the virtual scroll nodes (the ones that are updated in the function updateNodeContext() of virtual-util.js).

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

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 56 (3 by maintainers)

Commits related to this issue

display items list (ion-img is wonky and doesn't always display images: https://github.com/ionic-team/ionic/issues/11326 — committed to MathCityMap/O1-MCM-mobile-App by deleted user 7 years ago

Most upvoted comments

Incredible … I think I’ll be quick to get my entire team and projects to React Native. It is outrageous to see that this bug is still not fixed. Instead of working on Ionic 4, it would be nice to ensure first quality deliveries.

+16

mopi1402 on Jul 1, 2018

Well this is not entirely true:

first, you’ll have to update your component (that is, if your items are actually custom components)
each component then needs its own reference to ion-content
of course first few images won’t load then until you scroll
at which state, you start thinking of removing virtuallist you’re also using
<flip table emoji goes here>
git checkout .
start hoping ionic team @adamdbradley notice the issue being unresolved since early 2017.
wait for fix.

lordgreg on Dec 12, 2017

having the same issue 😕

AdnanCukur on Jun 2, 2017

One more frustrated developer chiming in… Seriously guys, fix that crap.

tomcatmwi on Nov 15, 2017

This is absolutely unacceptable. Petty much every app requires the functionality in question that doesn’t work. Also that there is an issue #9660 from Dec 2016 and it’s still unfixed is unsettling… 😦

bisak on Sep 11, 2017

having the same issue 😃

javico2609 on Jun 2, 2017

@karimessouabni i have got a solution regarding this issue. We can directly use img tag to avoid blank image. <img src="{{product.img}}">

shahid27125 on Oct 16, 2017

For the record - tried 3.1.1 - still an issue.

philrob on May 1, 2017

I can confirm this issue. I am seeing a similar behavior in my app and I am also using Ionic Framework 3.0.1.

Investigating the DOM during scrolling shows that the class attribute of some ion-image components changes from “img-loaded” to “img-unloaded” although the components are still in the visible viewport.

frankpapenmeier on Apr 23, 2017

Still the same bug…

TuNi54 on Mar 2, 2018

It’s unbelievable that this is not working. @bubbleguuum hit it on the head.

selected-pixel-jameson on Aug 21, 2017

Still unfixed. None of the suggested workarounds here and in another issue work properly. How are we supposed to smoothly scroll a list of hundred of small thumbnails when infinite scroll as a replacement is not an option ? This is a very basic use case on mobile…

bubbleguuum on Aug 3, 2017

This is an old issue - present since RC4 - all infos can be found in #9660

agrt56 on May 3, 2017

I also tried 3.1.1 - still an issue.

marcionitao on May 3, 2017

Yes, still happening 😦

kaikcreator on Apr 24, 2017

Yeah still a bug. I’m waiting for a fix. In the mean time i’ll be using this : https://www.npmjs.com/package/ng-lazyload-image

If there is a best solution, please feel free to tell me 😃

TheAngularGuy on Mar 23, 2018

Hello I’m having the same issue, in my case…first images are not showing…then if I scroll to the down to the bottom the images start to appear but only the ones that are in the bottom…scrolling up doesn´t make the fist images to appear…

  <ion-list [virtualScroll]="playList" [approxItemHeight]="imageSize + 'px'" [approxItemWidth]="imageSize + 'px'" [bufferRatio]=10>
        <div *virtualItem="let post" [style.width]="imageSize + 'px'" [style.height]="imageSize + 'px'">
          <ion-img [src]="element.pathToImage" [width]="imageSize+ 'px'" [height]="imageSize + 'px'"  ></ion-img>
        </div>
      </ion-list>

This is the html when they are not showing: <ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px"> <img> </ion-img> when showing:
<ion-img class="img-unloaded" ng-reflect-src="assets/img/1.jpg" ng-reflect-width="705px" ng-reflect-height="705px" style="width: 705px; height: 705px;"> <img src="assets/img/1.jpg" alt=""> </ion-img>

germanurrus on Jun 4, 2017

any work around guys?

kevinpallado on Nov 13, 2018

Wow, can’t believe how long people have been waiting for this … Waiting for a fix now, also.

capcom-r on Dec 12, 2017

Any plans on fixing this issue?

pjoriginal on Dec 8, 2017

it’s happen with *ngFor too

javico2609 on Apr 25, 2017

To be honest ionic team has nice independent project, like capacitor, which was useful, when i decided to create my own framework. The new ionic virtual scroll functionality wise didn’t change, just converted to stencil (web component, speed up, no supported by everyone, safari hws problems with it), so don’t wait too much for v4. This virtual scroll implementation is very basic. (screen orientation change bug, variable items, lazy loading problems, too rigid, try to solve problems, what browser does) In 2016,when i had small knowledge even about Angular, although i have been in the industry decades time, it was very challenging to make a framework. My gut feeling is that open source projects should be posted 3 cycles after, when the basic concepts in place. It’s true about angular also. To create such a flexible virtual scroll, which does not exist even in material is not an easy task.Took me month, although i have a framework which heavily integrates with backend. (i’m not sure, when is ready, it is a year now) so the ionic concept is a little shaky nowadays, anyway you can use ionic v4 with react. All the JavaScript framework does not fulfill the needs, what you see from native apps. It is good if it does exist, but if there is a bug, you unfortunately need to understand swift, android and other things as well. c++. I was able to make some juice even if i don’t use web components at this time, so the speed is fine, and hybrid apps will be the norm, no question at least because of pwa, but it requires far more skillset, than if you just go to native. (somebody needs to develop two times) no open source plugin was really reliable.

ghost on Nov 22, 2018

Having this issue too. @dm-grinko using img doesn’t support lazy-loading, which is important if you have lots of images.

danroot on Apr 11, 2018

Sameeeeeeee here

dmolinae on Mar 16, 2018

@fdambrosio In this comment https://github.com/ionic-team/ionic/issues/9660#issuecomment-304840427 are two possible workarounds for this.

DavidWiesner on Oct 18, 2017

I am also having the same issue inside an *ngfor. I’m switching to while waiting for a solution !!

karimessouabni on Oct 7, 2017

I was seeing this issue but fixed it with this temporary style hack:

   <ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item" style="overflow:hidden;width:300px;height:300px;">
            <ion-img [src]="item.url" [cache]="true" [width]="item.width" [height]="item.height"></ion-img>
        </ion-item>
    </ion-list>

and this css rule:

    ion-label {
        height: 100%;
    }

Not saying it’s THE fix but makes the issue go away.

glebinsky on Jul 28, 2017

Same here. Still having the issue

$ ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

lordgreg on Jul 18, 2017

For me too. Issue persists with current nightly.

frankpapenmeier on Apr 24, 2017