Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React webpack app public/images vs src/images

I'm also using webpack to transpile and bundle onto public.
What are the pros and cons of keeping image assets in public vs non-public.
Which project structure is better for a react app?

public/  
-images/  
--favicon.ico  
--(other-image-files...)  
-index.html
-bundle.js

src/
-components/
-style/
-images/
-utils/
like image 903
Ridhwaan Shakeel Avatar asked Mar 22 '18 16:03

Ridhwaan Shakeel


People also ask

Should I put images in src or public?

So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.

What is the difference between public and src in React?

Overall, the idea is that images in the public directory are accessible by URL outside your app. Anything in src will only be built in if you load it through webpack import.

What is the use of public folder in React?

The public folder contains static files such as index. html, javascript library files, images, and other assets, etc. which you don't want to be processed by webpack. Files in this folder are copied and pasted as they are directly into the build folder.


1 Answers

Overall, the idea is that images in the public directory are accessible by URL outside your app. Anything in src will only be built in if you load it through webpack import. I generally keep things in src unless it is publicly shared.

like image 109
Matt Condit Avatar answered Nov 15 '22 05:11

Matt Condit