0

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 -

enter image description here

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.

CubeDev
  • 125
  • 2
  • 9

3 Answers3

2

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} />
MP_26
  • 21
  • 2
1

I recommend locate using "require" in Ionic react.

So try:

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

like:

<IonImg src={require("../assets/balloons.svg")} />
Ahmad Tadi
  • 44
  • 7
0

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>
Ferhaan Schmidt
  • 39
  • 1