React: src folder or public folder for images (2024)

In a React application, the src folder is where you put the source code for your application, including your JavaScript, CSS, and other assets. The public folder is where you put the files that need to be publicly available, such as images, fonts, and other static files.

Here are some key differences between using images in the src folder and public folder:

• Images in the src folder are bundled and processed by webpack when building your application. This means that you can use JavaScript to import and manipulate the images, but it also means that the images will be part of the final bundle and may increase the size of your application.
• Images in the public folder are not processed by webpack and are simply copied to the build folder during the build process. This means that you can't use JavaScript to import and manipulate the images, but it also means that the images are not part of the final bundle and will not increase the size of your application.
• In terms of referencing the images in your code, you will use a different approach depending on where the images are located. If you have images in the src folder, you should use the import statement in JavaScript to import the images, then use the imported image in your CSS or JSX. For images in the public folder, you can reference them directly in your CSS or JSX using the relative path from the public folder.

If you don’t need to manipulate the images in your JavaScript code, and you don’t want the images to be part of the final bundle and increase the size of your application, you should use the public folder. If you need to manipulate the images in your JavaScript code, you should use the src folder.