React - convert string to use imported component

Question

I would like to know how I could use a string key to call an svg element imported from the /assets/ folder.

Here are my imports of svg images :

import image1 from "assets/images/image1.svg";
import image2 from "assets/images/image2.svg";

And here is my loop to display image1 and image2

{data.map((data: object, index: number) => (
  <img src={`image${index}`}/>
))}

But it doesn't work because I have this :

<img src={'image1'}/>

But i want this :

<img src={image1}/>

Thanks.

Answer 1

import image1 from "assets/images/image1.svg";
import image2 from "assets/images/image2.svg";

const images={
image1,
image2
}

{data.map((data: object, index: number) => (
  <img src={images[`image${index}`]}/>
))}