Ionic 4 Card display bug

Hey everyone,

I’m currently having an issue where cards in Ionic 4 won’t render for me if a card only consists of an image component. For example:

<ion-card>
  <ion-img src="{{image}}"></ion-img>
</ion-card>

This card renders as white space with no card even though the image variable has been set to a valid image url. You may think that there could be a bug in my code in setting this variable, however when I add anything other than the image to the card, the card successfully renders with the image. For example:

<ion-card>
  <ion-img src="{{image}}"></ion-img>
  hi
</ion-card>

This card renders fine, but in my case, I don’t want the card to have anything on it except the image itself.

Are there any workarounds to this?
I’m also not sure if this a problem that only I’m experiencing, so any help would be greatly appreciated!

I use binding for the image source, [src] and it works great for me. I also do not make use of interpolation for the actual value.

@danieldugger Thanks for the quick reply! That isn’t seeming to work for me oddly enough…

What about just using a plain ol’ img? No lazy loading.

Daniel Brittain Dugger

Founder

Bail Bond Software Solutions

615.405.4589 mobile

866.201.5079 toll-free

I used an img

Daniel Brittain Dugger

Founder

Bail Bond Software Solutions

615.405.4589 mobile

866.201.5079 toll-free

@danieldugger I suppose I’ll have to settle for that, as lazy-loading is appearing to cause more harm than help. Thanks for the recommendation.

Let me know if it worked!

That worked. Thanks!

Great to hear! Wonderful news! Just trying to satisfy the character requirement, lmao!