react如何访问到public内的文件

访问 public 目录文件的常用方法

在 React 项目中，public 目录下的文件可以通过以下方式访问：

直接使用绝对路径 React 会自动将 public 目录作为根路径。例如，若文件位于 public/images/logo.png，可直接通过 /images/logo.png 引用：

<img src="/images/logo.png" alt="Logo" />

使用环境变量 通过 process.env.PUBLIC_URL 获取 public 目录的绝对路径，适合动态拼接路径：

const imagePath = `${process.env.PUBLIC_URL}/images/logo.png`;
<img src={imagePath} alt="Logo" />

注意事项

• 开发环境和生产环境均支持上述方法。
• 避免手动拼接路径时忽略 PUBLIC_URL，可能导致部署后路径错误。
• public 目录下的文件会被直接复制到构建输出目录，无需额外配置。