如何在 ReactJS 中使用公共文件夹中的文件？

public 文件夹包含您不希望被 webpack 处理的静态文件，例如 index.html、javascript 库文件、图像和其他资产等。此文件夹中的文件会直接复制并粘贴到构建文件夹中。只有 `public` 文件夹中的文件可以从 HTML 中引用。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

项目结构：它将如下所示。现在创建一个资产文件夹并将任何示例图像放入其中，就像这里我们保留了gfg.png文件一样。此外，我们将gfgPublic.png文件保存在公用文件夹中。

简单的反应应用程序文件夹结构

App.js

import Intro from './components/Intro';
import './App.css';
  
function App() {
  return (
    

      
    
  );
}
  
export default App;

对于上述文件结构，为了在Intro组件中显示src/assets/gfg.png ，可以简单地导入并显示如下：

import gfgLogo from "../assets/gfg.png";
...

用于在公共文件夹中显示图像，“public/gfgPublic.png”。 src 属性的 URL 将是process.env.PUBLIC_URL + “/gfgPublic.png”。在这里， PUBLIC_URL将在构建期间替换为“public”文件夹的 URL。

介绍.js

import gfgLogo from "../assets/gfg.png";
  
const Intro = () => {
  return (
    

  
      Image at src/assets/gfg.png : 

      
      

  
      Image at public/gfgPublic.png: 

      
      

  
    
  );
};
  
export default Intro;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

要在 HTML 文件中包含 Public 文件夹中的任何 js 文件，请添加以下行。在构建过程中， %PUBLIC_URL%将被替换为 `public` 文件夹的 URL。

customScript.js

console.log("Your public/customScript.js is loaded !!");

输出：