Open In App
Related Articles

How to use files in public folder in ReactJS ?

Improve Article
Save Article
Like Article

In React the files store 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. Files inside the `public` folder can only be referenced from the HTML.

Approach to use files in public folder

To access and use files in the public folder in React we can use .env (environment) to store the url of the required file. Then this URL can be used in components/JS files present in the src folder. This grants access to the use of files in the public folder as needed.

Steps to create the applcation

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure

The project structure will look like the following after creating the assets folder with gfg.png file sample. Also, we have kept the gfgPublic.png file in the public folder.

Simple react app folder structure

Example: Here the link to file present in public folder is added to the .env and that is used in the Intro.js to access the required images as shown.


# .env file
PUBLIC_URL = "./public/"


// App.js  file
import Intro from './components/Intro';
import './App.css';
function App() {
  return (
    <div className="App">
      <Intro />
export default App;


// Intro.js file
import gfgLogo from "../assets/gfg.png";
const Intro = () => {
    return (
        <div className="App">
            Image at src/assets/gfg.png : <br />
            <img src={gfgLogo} />
            <br />
            Image at public/gfgPublic.png: <br />
                    process.env.PUBLIC_URL + "/logo512.png"
            <br />
export default Intro;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Console window shows the exrenal import of the png.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 13 Oct, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials