How to add images via props in ReactJs?

Question

I am trying to pass image path via props using

require("./house.jpg");

but it gives a broken image, the path for my image is under src.

How should I pass the image path to the props in React?

const imagesrc =require("./house.jpg");

ReactDOM.render(
  <React.StrictMode>
    <Header /> 
    <HomeBanner width='100%' height='400px' alt="Banner image" src={imagesrc}  />
    <App />
  </React.StrictMode>,
  rootElement
)

File Structure

How are you consuming src prop of HomeBanner?

Diwakar Singh
– Diwakar Singh

2021-02-22 12:16:40 +00:00
Commented Feb 22, 2021 at 12:16 — Diwakar Singh
– Diwakar Singh, Commented Feb 22, 2021 at 12:16

Syed SaeedulHassan Ali · Accepted Answer · 2021-02-22 12:18:19Z

1

It's better to keep image path's in a separate file/object and export it, which would not create confusions for path and can easily be passed in props.

for example:

const ASSETS_PATH = '../assets/img/';
const IMAGE = {
  LOGO: require(ASSETS_PATH + 'logo.png'),
};

export default IMAGE;

then pass it in like this

ReactDOM.render(
  <React.StrictMode>
    <Header /> 
    <HomeBanner width='100%' height='400px' alt="Banner image" src={IMAGE.LOGO}  />
    <App />
  </React.StrictMode>,
  rootElement
)

answered Feb 22, 2021 at 12:18

Syed SaeedulHassan Ali

6041 gold badge8 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to add images via props in ReactJs?

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