CODEWITHSUNDEEP
reactjsimagecreate-react-apppublic
Wekiban
Wekiban

Reputation: 61

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

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

Upvotes: 3

Views: 5383

Answers (2)

HAS-Jack
HAS-Jack

Reputation: 650

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

Upvotes: 4

Wekiban
Wekiban

Reputation: 61

process.env.PUBLIC_URL + 'your image path'

is a solution I found that works

Upvotes: 0

Related Questions