Ionic-framework: bug: image in tabs example is not working

[Th0rgal]

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 ([email protected])
   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]

Hi there,

I am not seeing this issue on my end. To clarify, this issue is happening on your physical device, but it is working fine on an emulator?

[Th0rgal]

Hi there,

I am not seeing this issue on my end. To clarify, this issue is happening on your physical device, but it is working fine on an emulator?

Yes exactly, but I can try with another device if you want.

[liamdebeasi]

Are you able to post a screenshot of what the issue looks like? I've been testing on emulators and physical devices and have only been able to reproduce this once, so I can't reproduce it persistently yet.

[Th0rgal]

Are you able to post a screenshot of what the issue looks like? I've been testing on emulators and physical devices and have only been able to reproduce this once, so I can't reproduce it persistently yet.

Here is the screenshot with default tabs template on my phone :
https://media.discordapp.net/attachments/260166967703502849/597542180294361108/Screenshot_2019-07-07-23-38-53-325_io.ionic.devapp.png

But I also tried something else: I added the image in the code just at the top, like that:

    <ion-img src="/assets/shapes.svg"></ion-img> <!-- ADDED HERE -->
    <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>

The image not included into the ion-card is correctly displayed:
https://media.discordapp.net/attachments/260166967703502849/597546158239252493/Screenshot_2019-07-07-23-54-51-469_io.ionic.starter.png

[liamdebeasi]

@Th0rgal Do you think this issue is related to the one you are having? https://github.com/ionic-team/ionic/issues/18734

[lincolnthree]

@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;
  }
}

[Th0rgal]

@Th0rgal Do you think this issue is related to the one you are having? #18734

Yeah this is possible

[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

[lincolnthree]

You're welcome!

[liamdebeasi]

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

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.