React中如何从public文件夹导入图片文件夹至src文件夹

• 核心问题：React 的 public 是静态资源目录，不能用 ES6 的 import 语法直接导入到 src 代码里，Webpack 默认只处理 src 内部的模块引用，这是导致报错的根本原因。

• 正确的引用方式：

  1. 在 JSX 里直接用绝对路径：

     <img src="/images/your-image.png" alt="图片描述" />
     

     这里的 / 会直接指向 public 根目录，只要你的图片放在 public/images 下就会生效。
  2. 在 JS 文件里存路径变量：

     const imgUrl = process.env.PUBLIC_URL + '/images/your-image.png';
     

     之后在 JSX 里用 src={imgUrl} 即可。

• 避坑要点：

  • 别尝试用相对路径 import 导入 public 里的图片，比如 import img from '../../public/images/xxx.png'，这种写法 Webpack 完全不支持。
  • 核对图片路径：检查文件名、文件夹名的拼写和大小写，别因为笔误导致404。
  • 重启开发服务：如果调整了文件结构，关掉 npm start 再重新启动，确保配置更新。

内容的提问来源于stack exchange，提问作者FarukDev