3

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

Wekiban
  • 61
  • 1
  • 4
  • Have you put them to build? It should be in public I guess – Konstantin Modin Feb 17 '21 at 20:16
  • Did you copy your images to the build folder? You run build only after you finished tested your code not before. So if you did it won't find a thing unless you set the webpack to search for it over there which makes no sense at all. A good practice is to add a folder named "assets" to your src folder and moving all the images / gifs / svgs etc... to there and not to the "public" folder. – Uria Levi Feb 18 '21 at 07:15

2 Answers2

4

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))

HAS-Jack
  • 620
  • 6
  • 10
0

process.env.PUBLIC_URL + 'your image path'

is a solution I found that works

Wekiban
  • 61
  • 1
  • 4