Rendering multiple images using Props in React.js

Question

I am trying to render images in my local system to a website using react components. In the "index.js" file I am creating 4 different components with attributes. One of the attributes is the "img". In the "Card.js" file I have created a card component and want to render this 4 times on the page. But, I am unable to link the image to the component properly hence it's not loading. I have attached the screenshots and the relevant code below.

Component that I need to render multiple times using props

Index.js file where I am passing props to components

are you importing the image – Hamza Manan Jul 29 '22 at 06:54 — Hamza Manan, Jul 29 '22 at 06:54
No, I wasn't. But thanks now it's working – Raghav Kavimandan Jul 29 '22 at 07:01 — Raghav Kavimandan, Jul 29 '22 at 07:01

score 0 · Accepted Answer · answered Jul 29 '22 at 06:49

0

You should import the image, using

<Card img={require('./mj.jpg')} />

or

import mj from './mj.jpg';

<Card img={mj} />

Some reference: How do I reference a local image in React?

answered Jul 29 '22 at 06:49

Ivan Wu

191
1
10

Thanks, man. I am fairly new to React and these small things can get very confusing sometimes – Raghav Kavimandan Jul 29 '22 at 06:55

Rendering multiple images using Props in React.js

1 Answers1