Image not showing in Ionic React

Question

I want to show a .svg image which is in the assets directory in my src directory.

Here is a glimpse of the folder structure -

I want to get the balloons.svg from the Register.tsx. I am using the IonImg element and have tried directories like ../assets/balloons.svg as source but they doesn't seem to work.

Note: The image appears properly if I use an image URL as source.

Answer 1

I recommend locate using "require" in Ionic react.

So try:

require("../assets/balloons.svg")

like:

<IonImg src={require("../assets/balloons.svg")} />

Answer 2

Your src in Ion React App will be like this code to lode the img ..

<IonImg src="/assets/imgs/image.JPG"></IonImg>

with out src point ../ like

<IonImg src="**../**public/assest/imgs/image.JPG"></IonImg>

Answer 3

The svg needs to be imported into the Register.tsx file:

import Balloons from '../assets/balloons.svg';

And then set the src attribute to the import:

<IonImg src={Balloons} />