0

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:

enter image description here

Freestyle09
  • 4,894
  • 8
  • 52
  • 83
  • can you put your image assets in another folder and reference that from everywhere? eg. `/static/spinner.png` – imjared Feb 25 '19 at 18:14
  • When i do this, my reference takes me to `/other/static/spinner.png` route always add name folder to path – Freestyle09 Feb 25 '19 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 Feb 25 '19 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 Feb 25 '19 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 Feb 25 '19 at 18:26

1 Answers1

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