在 React.js 中使用 Props 渲染多个图像

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

Answer 1

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?