lincolnthree commented 4 years ago

Bug Report

Ionic version: [x] 4.x

Current behavior:

Currently, the <ion-img> tags do not load when they are initially loaded in the viewport. They also do not reliably load when they are scrolled into the viewport from offscreen. I'm assuming something is broken with the load trigger in 4.6.x/Stencil One.

The strange part is that it works fine in Electron / Capacitor, but does not load on Chrome.

It seems to work a little better on Safari, but I do still see the issue occasionally with random images.

Which images fail to load seems random, but the same images fail each time on refresh, so that makes me think there's something pseudorandom going on. Not 100% random.

Expected behavior:

ion-img should load its image when in the viewport.

Steps to reproduce:

I tried creating a sample app, but could not reproduce the issue. I really don't know. As I mentioned, the images load fine in Electron/Capacitor, but do not load in native Chrome. And load better in Safari, but not 100%.

insert short code snippets here

Other information:

Ionic info:

Lincolns-MacBook-Pro-2:topdecked-unified lincoln$ ionic info

Ionic:

   Ionic CLI                     : 5.2.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.1-dev.201907052128.7953088
   @angular-devkit/build-angular : 0.800.3
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 8.0.3
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v12.3.1 (/usr/local/Cellar/node/12.3.1/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Tagging issue https://github.com/ionic-team/ionic/issues/18655

lincolnthree commented 4 years ago

Here's a video of the issue since I can't seem to reproduce in a sample app, or figure out why some images load but others don't:

https://www.youtube.com/watch?v=PXglOJ6vd3w&feature=youtu.be

When I inspect the ion images in the dom, the image tag itself has not been populated with a src attribute:

Screen Shot 2019-07-08 at 4 44 07 PM

liamdebeasi commented 4 years ago

Thanks for the issue! Can you test this with the latest dev build of Ionic and see if this fixes the issue you are seeing? npm i @ionic/angular@dev

lincolnthree commented 4 years ago

@liamdebeasi On it! Thanks for the reply :)

lincolnthree commented 4 years ago

@liamdebeasi That's a negative :( Issue remains.

lincolnthree commented 4 years ago

Lincolns-MacBook-Pro-2:topdecked-unified lincoln$ ionic info

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.0-dev.201907061735.e059fc8
   @angular-devkit/build-angular : 0.800.3
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 8.0.3
   @ionic/angular-toolkit        : 1.5.1

liamdebeasi commented 4 years ago

Ok thanks for checking! Are you able to provide a repository with the code required to reproduce this issue?

lincolnthree commented 4 years ago

@liamdebeasi Technically I could, but ... are you and anyone else who'd look at the code able to sign an NDA? :/

liamdebeasi commented 4 years ago

It doesn't have to be your product-specific code. I'm mostly interested in seeing an example of an ion-img not loading. Is this issue happening with all ion-img elements or certain images?

lincolnthree commented 4 years ago

@liamdebeasi I tried to reproduce in a sample app, but was unable to do so. The issue seems to happen most frequently with <ion-img> elements that are loaded in a named router outlet.

<ion-img> is encapsulated in a custom component (the same component used in other areas of the page that load just fine.)

Actually, I just realized that the other user having issues with the images not loading in tabs might also be similar, since the new Ionic tabs are implemented using named router outlets. My sample app had used the side-menu layout variant which does not use named outlets.

lincolnthree commented 4 years ago

I'll try to give more info if I can; hopefully, this will help:

Images that do not render seem to have a width of 0. They do appear to have a height:

When I manually set a width (for example 50px) on the <img> tag element in the DOM, nothing happens. But when I manually set its height, the image src attribute is populated and the image loads immediately.

The image will also appear if I set a height manually on the <ion-img> element.

lincolnthree commented 4 years ago

@liamdebeasi Okay, I found something interesting. I set a min-height: 1px on the <ion-img> and that appears to have gotten things working. I'm going to do more testing and see if it breaks again.

liamdebeasi commented 4 years ago

Thanks for the follow up. The tabs starter does not use named router outlets, so I don't think that would be the cause in the case of a tabs application.

We aren't able to fix this issue if we can't reproduce it, so any code that can help us reliably reproduce this issue is appreciated. Thanks!

lincolnthree commented 4 years ago

@liamdebeasi Understood. I wish I could help more than just dumping my entire app on you (it's massive.)

brandyscarney commented 4 years ago

It could possibly be related to this https://github.com/ionic-team/ionic/pull/18708

lincolnthree commented 4 years ago

Putting this here for others who might run across this problem. Setting a min-height on the ion-img element seems to resolve the issue:

in your global.scss (or other relevant stylesheet):

:root {
  ion-img {
    /** 
     * Bug fix for:
     * https://github.com/ionic-team/ionic/issues/18734
     */
    min-height: 1px !important;
  }
}

cmer4 commented 4 years ago

Hey guys, I have seen this issue with my app as well. I will try to deploy it to live environment on Friday this week and have you access it and can share code as well if no one will provide example. But yes I confirm randomly images are not loading.

Will try min-height trick

liamdebeasi commented 4 years ago

@cmer4 If you could provide a code reproduction of the issue, that would be very helpful. Thanks!

dlodeprojuicer commented 4 years ago

I came across issue. I had my images in src/assets folder

Ionic cli: 5.2.3
Vue cli: 3.9.2

"@ionic/core": "^4.6.2",
"@ionic/vue": "0.0.4",

If src points to an image in src/assets like so ../assets/logo.png in <ion-img> the image will not display. Th image must be in public/img like so ../img/logo.png.

When using <img> tag the src must point to src/assets like so ../assets/logo.png if it is a hardcoded string

Demo: https://ionic-images.netlify.com/ Repo: https://github.com/dlodeprojuicer/ionic-images

gRegorLove commented 4 years ago

I have run into this several times with ion-img as the first element inside an ion-card-content, testing in browser. Since ion-img is lazy loaded when in view, I think it has something to do with the parent element somehow "covering" it, so it never gets lazy loaded. If I add a margin-top: 1px to the ion-img, the image loads pretty reliably. The min-height trick above sounds similar. I am still debugging and will update if I find anything more solid.

Ionic:

   Ionic CLI                     : 5.2.1 (C:\Users\gRegor\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

sprucify commented 4 years ago

I started to see ion-img images not loading on Android 9 devices. But I also migrated to Angular 8, so I'm not sure what the real cause is.

I can confirm that min-height: 1px !important; workaround worked for now. Tested on Samsung S10 Android 9

jet174 commented 4 years ago

same problem

<ion-slides [options]="slideOpts" pager="true" [appTheme]="{key: 'global', theme: 'sliderPoint' }">
            <ion-slide class="ion-text-center">
                <ion-card mode="ios">
                    <ion-card-content class="ion-no-padding">
                        <ion-img src="assets/train/1.jpg" class="slide__img"></ion-img>
                        <div class="slide__title"> 1</div>
                    </ion-card-content>
                </ion-card>
            </ion-slide>
</ion-slides>

vdias38 commented 4 years ago

I have same issue, occurs randomly, I mean on a list of cards, some imgs appears and others no, even if urls of imgs are same. https://crud-angularfirestore-ionic4.web.app (source code on github, check items-list page) I can confirm that min-height: 1px !important; workaround worked for now.

Ionic Framework : @ionic/angular 4.9.0 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0

cherzog commented 4 years ago

Same Problem here. But not everytime. Maybe some kind of race condition.

Pressing F5 in Browser: it works 8 times out of 10.

If it doesn't work, the DOM look like described here:

https://github.com/ionic-team/ionic/issues/18734#issuecomment-509384809

codyburleson commented 4 years ago

I've had the same issue in the Chrome browser (random images in ion-img not loading) and can confirm that min-height: 1px !important; workaround worked for me also.

mgoyal98 commented 4 years ago

I also had the same issue, and min-height: 1px !important; workaround worked for me also.

andreas-aeschlimann commented 4 years ago

I have the issue that images very unreliably load with lazy loading (ion-img).

It appears to me that this issue is related to the view port. The images that don't load are usually those images that are within the viewport at initial load. When I scroll down and up again, the images begin to appear.

It is quite a severe issue because it is totally random but easily reproduceable because it happens a lot. The user is then left without any image, it does not show the fallback image neither.

andreas-aeschlimann commented 4 years ago

Putting this here for others who might run across this problem. Setting a min-height on the ion-img element seems to resolve the issue:

in your global.scss (or other relevant stylesheet):
:root {
  ion-img {
    /** 
     * Bug fix for:
     * https://github.com/ionic-team/ionic/issues/18734
     */
    min-height: 1px !important;
  }
}

Unfortunately, I cannot confirm this. It did not work for our app. Images that are in the viewport at initial load did not always load properly.

vdias38 commented 4 years ago

Hi @andreas-aeschlimann, did you use tab bar on your page ? The workaround works for me only on pages without tab bar (check my stackblitz demo), but don't if I use a tab-bar.

andreas-aeschlimann commented 4 years ago

Yes, I have tabs as well, especially on the start page. Not on all pages, so I am not sure (yet) if it works on those without tabs.

nuryagdym commented 4 years ago

In my case it, I faced this error ONLY on android v7.0.0 on Android Studio.

`Ionic:

Ionic CLI : 5.4.10 Ionic Framework : @ionic/angular 4.11.5 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.3.20 @ionic/angular-toolkit : 2.1.1 Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0 `

carloliwanag commented 4 years ago

Putting this here for others who might run across this problem. Setting a min-height on the ion-img element seems to resolve the issue: in your global.scss (or other relevant stylesheet):
:root {
  ion-img {
    /** 
     * Bug fix for:
     * https://github.com/ionic-team/ionic/issues/18734
     */
    min-height: 1px !important;
  }
}
Unfortunately, I cannot confirm this. It did not work for our app. Images that are in the viewport at initial load did not always load properly.

This worked for me. Thanks!

armn commented 4 years ago

I have a similiar issue — on some page loads the <ion-img> child's <img> elements don't get their src, although they are in viewport. If I start to scroll around, the images appear when entering the viewport.

It could have something to do with tabs or the column layout CSS I'm using, but not 100% what causes it yet. I have added the mentioned min-height workaround but that didn't help.

It can be semi-reliably replicated in https://draugsapp-dev.web.app/, just hit refresh a few times. Source code is available at https://github.com/armn/draugs/tree/fa2bdf8bb18d3299f8e6c794ece071669fe69482

andreas-aeschlimann commented 4 years ago

@armn this is exactly the issue we have as well. Scrolling down and up usually makes the images load, unless they are in a fixed container.

nprail commented 4 years ago

I am also encountering this issue when upgrading from Ionic Angular 4.1.1 to 4.11.10 (Angular 7.2.16). The min-height CSS workaround does not do the trick for me.

I'm using an ion-grid with two rows. The second row has all of the images that don't always load. I removed the first row to post a simplified code snippet but that fixed the issue.

Here is a full template code snippet that doesn't work most of the time. The TS basically just loads events from an API in ngOnInit. I tried to create a Stackblitz demo but it refused to install the dependency versions that I specified...

<ion-content>
  <ion-grid>
    <ion-row class="ion-align-items-center">
      <ion-col>
        <ion-img src="../../assets/wm-logo.svg"></ion-img>
        <p class="ion-text-center">Which event are you attending?</p>
        <ion-searchbar
          placeholder="Search for an event..."
          [(ngModel)]="queryText"
          (ionChange)="search()"
        ></ion-searchbar>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col *ngFor="let event of events" size="6">
        <ion-card class="ion-text-center" (click)="goToEvent(event)">
          <ion-img [src]="event.org.appSettings && event.org.appSettings.icon">
          </ion-img>
          <ion-card-header>
            <ion-card-title style="font-size: 15px;">
              {{ event.name }}
            </ion-card-title>
            <ion-card-subtitle>
              {{ event.startDate | date: 'MMM d' }} - {{ event.endDate | date:
              'mediumDate' }}
            </ion-card-subtitle>
          </ion-card-header>

          <ion-button class="ion-margin-bottom" size="small">Open</ion-button>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

nprail commented 4 years ago

Upgrading to @ionic/angular@5.0.0-rc.0 seems to have resolved the issue for me.

andreas-aeschlimann commented 4 years ago

Upgrading to @ionic/angular@5.0.0-rc.0 seems to have resolved the issue for me.

I am glad to read that, thanks. I will upgrade as soon as Ionic 5 officially releases.

liamdebeasi commented 4 years ago

Could everyone please try Ionic 5.0.0-rc0 and let me know if it fixes the issue? I've been trying it in a few examples apps provided in this thread and the issues appears to be fixed in that version.

codyburleson commented 4 years ago

Could everyone please try Ionic 5.0.0-rc0 and let me know if it fixes the issue? I've been trying it in a few examples apps provided in this thread and the issues appears to be fixed in that version.

It does not fix the issue in my test case. First of all, for a quick look, take a look at this page in Chrome on my test (staging) site:

https://staging.codyburleson.com/photos/jack-depope

That is using Ionic 5.0.0-rc.0 and WITHOUT the following work-around in global/app.css...

ion-img {
  min-height: 1px !important;
}

If I uncomment the CSS stanza above (e.g. if I use the old work-around), and reload, the images all load fine again.

If you would like to test this locally with my staging branch, see:

https://github.com/codyburleson/cburleson-pwa/tree/staging

The work-around is commented out in global/app.css and you can simply uncomment it (lines 31-33)

armn commented 4 years ago

Could everyone please try Ionic 5.0.0-rc0 and let me know if it fixes the issue? I've been trying it in a few examples apps provided in this thread and the issues appears to be fixed in that version.

Thank you! I updated to 5.0.0-rc.2 and in my case the issue appears to be resolved (without the min-height workaround).

ebeliejinfren commented 4 years ago

ionic 5.0.1 it not correct working in custom horizontal scroll

philmerrell commented 4 years ago

I came across this for the first time today. I'm using @ionic/angular 5.0.5:

Here's the html that is causing this behavior for me:

<ion-card routerLink="/tabs/home/faculty">
  <ion-img src="/assets/home/faculty.jpg"></ion-img>
  <ion-item color="secondary" detail>
    <h2>FACULTY</h2>
  </ion-item>
</ion-card>
<ion-card routerLink="/tabs/home/student">
  <ion-img src="/assets/home/student.jpg"></ion-img>
  <ion-item color="secondary" detail>
    <h2>STUDENT</h2>
  </ion-item>
</ion-card>
<ion-card routerLink="/tabs/home/staff">
  <ion-img src="/assets/home/staff.jpg"></ion-img>
  <ion-item color="secondary" detail>
    <h2>STAFF</h2>
  </ion-item>
</ion-card>

For some reason, with this configuration, the middle image doesn't load, but strangely, it will load as soon as I click on it to go to the view.

If I comment out the ion-card components, then all the ion-img components load properly. If I replace ion-img with the standard img tag, the images load as expected.

Seems to be an issue with multiple cards and the ion-img inside.

Thanks for the css work around, that does fix it.

austinhutchison commented 4 years ago

I am experiencing this issue, CSS workaround was successful - thank you @lincolnthree

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 5.1.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 9 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/<user>/Library/Android/sdk)
   ios-sim           : 8.0.2
   NodeJS            : v12.16.1 (/Users/<user>/.nvm/versions/node/v12.16.1/bin/node)
   npm               : 6.13.4
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

lincolnthree commented 4 years ago

@austinhutchison You're welcome :)

andrei0x309 commented 3 years ago

I am having the same issue on Android version 5.1.1, the issue doesn't appear on newer versions of Android, I tested Android 6 ,7, 8 and ion-img works but not on [ Andoid 5.1.1 ]. Regular img element works also on Android 5.1.1.

I am using Ionic -> -- @ionic/angular@5.1.1

Using the CSS workaround doesn't solve the issue, and the CSS workaround doesn't seem do be necessary on newer android versions where it works without it. Also no problem in browser(aka ionic serve).

I am considering to make a osVersion check to use img instead of ion-img on older devices like 5.1.1...

EDIT - 1 After a bit of digging I found is related to the WebView available on the android phone, is not a CSS issue as the img element inside the ion-img will not even have the src attribute defined ever. For example this WebView user-agent doesn't work with ion-img: Mozilla/5.0 (Linux; Android 5.1.1; G011A Build/LMY48Z; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/52.0.2743.100 Safari/537.36.

I didn't find in the documentation what is the minimum Chrome version needed in order to ion-img to work properly.

EDIT - 2 Found what is causing the issue in my case, I detailed here under a new bug report: https://github.com/ionic-team/ionic/issues/21482

Basically is because ion-img will not render if support https://caniuse.com/#feat=intersectionobserver for is partial.

fkromer commented 3 years ago

With ionic + angular it turned out that absolute references (<ion-img src="/assets/<rootdirimage>.png"></ion-img> or <ion-img src="/assets/<some-subdir>/<subdirimage>.png"></ion-img>) work just fine with the angular.json mentioned with ionic serve (served from src/assets/) as well as with ionic build + http serving of the output directory (served from <output-dir>/assets/). Hope this helps.

selected-pixel-jameson commented 3 years ago

This also happens with standard tags. I had to apply the same fix to get it to work when loading a regular image.

:root {
  img{
    min-height: 1px !important;
  }
}

See https://github.com/SimonGolms/ngx-ionic-image-viewer/issues/41. This is where I came across this issue. It only happens on Android.

svmszcck commented 2 years ago

Solution of @lincolnthree fixed the problem for ionic 6.0.3 with Vue(Setting min height for ion-img)

fabbioamaral commented 1 year ago

@ionic/angular: 4.4.2 app here.

wasn't loading the first image present within ion-slides. It only showed after I interacted with the slides. My solution was to replace for tag, since uses lazy loading and in my case I needed to load few images.

liamdebeasi commented 1 year ago

Hi everyone,

Does this issue still reproduce on the latest version of Ionic 6? I am not able to reproduce this on my end anymore.

andrei0x309 commented 1 year ago

A long time ago, when this happened to me was with an older Android 5, and I didn't have any issues with newer Androids.

With ionic 6 I tested on android( 10 - api29, and 11 api30), and found no issue.

I'll install an emulator with 5.1 and test it in 10 minutes to see if this is an issue for such an old Webview.

ionic-team / ionic-framework

bug: <ion-img> not appearing since 4.6.* (worked in 4.5.x) #18734

Bug Report