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:

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} />