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.

Alex Varghese · Accepted Answer · 2021-02-09 15:06:23Z

3

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}`]}/>
))}

answered Feb 9, 2021 at 15:06

Alex Varghese

2,28019 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - convert string to use imported component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related