React – local image won't load?

I am attempting to load a local image in React js. Following this answer, this is how I’ve attempted this –

<img src={require('../public/images/icon.png').default} />

Where the image is icon.png located in my public folder and I’m writing this in the export default function Home() { return ( portion of my index.js. This is how the image renders:

enter image description here

I have deployed this to Vercel as well as tested locally, so I do not think this is a server issue. I’ve tried the import method described here as well.

What is wrong here and how can I load a local image?

>Solution :

At the moment I can propose you two options.

  1. Import your image as a component.
    Just place this line of code in the head of your file:
    import {ReactComponent as COMPONENT_NAME} from PATH
    And place this COMPONENT_NAME in your other components. You can apply stying to it, props and etc.
  2. Import your image path.
    import IMAGE_PATH from PATH
    And in your component:
    <img src={IMAGE_PATH} {...options} />

Leave a Reply