bug: image in tabs example is not working

Bug Report

Ionic version:

[x] 4.x

Current behavior:

I just installed the ionic example following the docs using “ionic start tabs” and the image in the “Get Started” section is not displayed.

Expected behavior:

It should display the image like it does in the browser

Steps to reproduce:

I tried to load the app on my android phone (Xiaomi Redmi Note 7 with miui 10, android 9) using ionic server --devapp and it is the same using ionic cordova run android --device however it is working fine using the emulator (the image is well displayed).

Related code:

    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (C:\Users\thoma\AppData\Roaming\nvm\v12.6.0\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

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.5.2
   native-run  : 0.2.7

System:

   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v12.6.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic/issues/18734.

[Th0rgal]

@Th0rgal Could you try to set a min-height: 1px on the <ion-img> and let me know if that causes the image to load correctly? In my case it seems to have resolved the issue:

in your global.scss:

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

It works! Thank you very much