How to use files in public folder in ReactJS ?

19 Aug, 2021
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. Only files inside the `public` folder can be referenced from the HTML.
Creating React Application:
Step 1: Create a React application using the following command:npx create-react-app foldername
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
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following. Now create an assets folder and put any sample image into it, like here we have kept the gfg.png file. Also, we have kept the gfgPublic.png file in the public folder.
Simple react app folder structure
App.js
import Intro from './components/Intro';import './App.css';  function App() {  return (    <div className="App">      <Intro />    </div>  );}  export default App;
For the above file structure, in order to display the src/assets/gfg.png in Intro component, it can be simply imported and shown like this: 
import gfgLogo from "../assets/gfg.png";
...
<img src={gfgLogo} />
For showing image inside the public folder, ‘public/gfgPublic.png’. The URL for the src attribute will be process.env.PUBLIC_URL + “/gfgPublic.png”. Here, the PUBLIC_URL will be replaced with the URL of the `public` folder during the build.
<img src={process.env.PUBLIC_URL + "/gfgPublic.png"} />
Intro.js
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 />      <img src={process.env.PUBLIC_URL + "/gfgPublic.png"} />      <br />      </div>  );};  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:
For including any js files from the Public folder in the HTML file, add the following line. The %PUBLIC_URL% will be replaced with the URL of the `public` folder during the build.
<script src="%PUBLIC_URL%/customScript.js" ></script>
customScript.js
console.log("Your public/customScript.js is loaded !!");
Output:
React-Questions
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components