Images not loading from Public folder (using create react app)

Question

wondering if anyone can help me. Im following a tutorial which has told me to put the images in the public folder in an app created with create-react-app

'./img/newyork.jpeg'

this is the path the tutorial told me to use for images in the public folder however the images aren't loading and i cant understand why any help would be much appreciated

Build File Structure

Answer 1

You shouldn't keep any image assets in the public folder other than favicons etc See this thread also: The create-react-app imports restriction outside of src directory (TLDR: "This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.")

Generally in a create-react-app I would import images like so:

import lovelyImage from 'images/lovely-image.jpg'

and then rendered:

<img src={lovelyImage} alt={''} />

(the example above would assume the images directory is in the src directory (not public))