Ion-img issue with ionic 4

Ionic Framework
1

I’m trying to show an image using ion-img inside an ion-card component :

<ion-card>
    <ion-img src="https://www.surfertoday.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.surfertoday.com/images/stories/koloheandino24.jpg" ></ion-img>
</ion-card>

Any Idea please?
Thank you.

2

<ion-img> should only be used in conjunction with virtual scroll. Otherwise, use an ordinary <img>.

1 Like
3

Is this the case for sure? The Ionic 3 documentation specifically called this out, but the version 4 documentation does not. We’re having some pain with detached IntersectionObserver objects and if it’s the case that we shouldn’t be using this outside of ionic-virtual-scroll (we can’t because we can’t make our list a direct child of ion-content due to the design) it would be good to know.

1 Like
4

I hadn’t noticed this before, thank you. I agree with your assessment that there may have been an attempt to decouple this a bit, so perhaps you may wish to file an issue with your detached IntersectionObservers. I would not be surprised if that particular use case had not been extensively tested in the wild, because of the (perhaps historical) tight coupling with virtual scroll.