Why React can not access images from public

How I got to this question.

So the other night I was working on a small react project. I’ve imported images once before with no issues. But this one was giving me a module error with webpack.

Here’s what I found.

So when you save images or images folders it best to use src/assets Inside your react project, don’t save them to the public/folder even though you can tweak that html file webpack does not process it because that folder is technically not part of the final bundle when you build production. The fastest way is to move images to src file where all your ‘component/folder’ files are in.

Okay but why?

Images stores in Your src/folder directory is apart of the final bundle with webpack, so they have a bonus of being able to be imported as a JavaScript module.

So in addition if it’s something you’re going to be importing to put it In your src/.