ionic-framework
ionic-framework copied to clipboard
ionic-team
bug: <ion-img> not appearing since 4.6.* (worked in 4.5.x)
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 ([email protected])
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
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:
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
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
Ok thanks for checking! Are you able to provide a repository with the code required to reproduce this issue?
@liamdebeasi Technically I could, but ... are you and anyone else who'd look at the code able to sign an NDA? :/
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?
@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.
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.
@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.
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!
@liamdebeasi Understood. I wish I could help more than just dumping my entire app on you (it's massive.)
It could possibly be related to this https://github.com/ionic-team/ionic/pull/18708
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;
}
}
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
@cmer4 If you could provide a code reproduction of the issue, that would be very helpful. Thanks!
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
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
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
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>
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
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
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.
I also had the same issue, and min-height: 1px !important; workaround worked for me also.
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.
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.
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.
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.
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 ([email protected]) Cordova Platforms : android 8.1.0 `
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!
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
@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.
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>
Upgrading to
@ionic/[email protected]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.
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.
Could everyone please try Ionic
5.0.0-rc0and 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)
Could everyone please try Ionic
5.0.0-rc0and 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).
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.
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 ([email protected])
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
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/[email protected]
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.
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.
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.
Solution of @lincolnthree fixed the problem for ionic 6.0.3 with Vue(Setting min height for ion-img)
@ionic/angular: 4.4.2 app here.
tag, since
