IonImg shows as broken image when i load my page

Question

I'm using the Ionic version 5.4.16tag and i used the to display an image in my web app, but the image shows as broken image in when i load the page, why is this happening and how do I fix it; Image is attached below: this is the code i use to create the image:




<!-- language: tsx -->

    <IonRow className="ion-justify-content-center ion-text-center">
    <IonCol></IonCol>
    <IonCol size="3">
      <IonImg src="icon.png" />
      <div className="spinner">erie</div>
    </IonCol>
    <IonCol></IonCol>
    </IonRow>

the ion-image source needs to be updated, u need to put the relative path :) — Athif Shaffy, Jul 20 '20 at 19:58
that's the thing the image is in the same folder so i'm putting just the name, i also tried "./icon.png" — Tochi Bedford, Jul 21 '20 at 05:06

score 1 · Answer 1 · answered Apr 15 '21 at 01:29

1

You must import the image before you use in IonImg component. For instance:

import myImage from './icon.png'

...

<IonImg src={myImage} />

answered Apr 15 '21 at 01:29

Wesin Alves

371
1
3
13

IonImg shows as broken image when i load my page

1 Answers1