ion-img doesn't work inside an ion-card - Ionic 4

Question

I think I’m facing a strange issue. I’m trying to show an image using ion-img inside an ion-card component :

<ion-card>
    <ion-img src="https://www.mywebsite.com/images/stories/koloheandino24.jpg" ></ion-img>
</ion-card>

But it doesn't work!!

The exact same code with any HTML tag before ion-img, it works!!!

<ion-card>
    <span>bla bla ...</span>
    <ion-img src="https://www.mywebsite.com/images/stories/koloheandino24.jpg" ></ion-img>
</ion-card>

Answer 1

This work. Check again your image link.

<ion-card>
    <ion-img src="https://images.unsplash.com/photo-1564446586861-7469f94e9c98?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" ></ion-img>
</ion-card>

Answer 2

Solution : Add min-height: 1px to ion-img

There is an open issue in github, and in this comment the author found this solution.

I quote the author :

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