Create React App - routing change images path

Question

I'm creating a simply lightbox with create-react-app and I found one big issue that is bringing me some problems. I have in public folder some images. In root public folder I have spinner file Spinner-white.svg and I'm creating gallery on page localhost:3000/other When I am on this page all images that I want to add must be in folder /other but I'm using this Spinner somewhere else and I don't want to copy it on every folder that match my route path. localhost:3000/other2 for this path I need to create other folder /other2 and paste Spinner here.

I fixed this issue on production version but I cannot find answer in development.

Fixing for production:

{
   id: 1,
   url: process.env.PUBLIC_URL + '/other/3.jpg'
}

and in client package.json

"homepage": "path_to_domain",

Screen of my network tab:

can you put your image assets in another folder and reference that from everywhere? eg. /static/spinner.png — imjared
– imjared, Commented Feb 25, 2019 at 18:14
When i do this, my reference takes me to /other/static/spinner.png route always add name folder to path — Freestyle09
– Freestyle09, Commented Feb 25, 2019 at 18:15
That seems like the problem you need to fix then. It's really unclear what your "fixing for production" step actually is and without any other code, this problem is going to be impossible to solve. — imjared
– imjared, Commented Feb 25, 2019 at 18:20
I am adding process.env.public_URL + mypath so on production images are loaded correctly 'http:somedomain.com/other/3.jpg' not '/other/other/3.jpg'. I can load image on url : '/other' with image from another folder. But i need to set homepage in package.json so app knows which is root domain. — Freestyle09
– Freestyle09, Commented Feb 25, 2019 at 18:24
Ok, I fixed this issue :) Added to local env PUBLIC_URL='localhost:3000' and everything works correctly :) I will add answer in 2 days — Freestyle09
– Freestyle09, Commented Feb 25, 2019 at 18:26

Gaurang Doshi · Accepted Answer · 2019-02-25 18:29:27Z

1

Hope you are doing well.

For your issue, you have to introduce the base path in .env file. With help of base path, your case to access the spinner wherever you want.

Hope it will help you. create-react-app build with PUBLIC_URL

answered Feb 25, 2019 at 18:29

Gaurang Doshi

1045 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create React App - routing change images path

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related