React应用中无法访问public文件夹内images目录的问题求助

实用解决步骤： #

• 给路径添加根目录斜杠：React的public文件夹是静态资源的根目录，相对路径可能因组件所在位置不同引发错误，改用根目录开头的绝对路径即可：

  const Menu = [
      {
          id: 1,
          image: "/images/maggi.jpg", // 开头加/
          name: "Maggi",
          category: "Breakfast",
          price: 30,
          description: "Hi please select maggi here"
      },
  ]
  

• 使用PUBLIC_URL环境变量（更适配部署场景）：React提供process.env.PUBLIC_URL指向public文件夹的根目录，不管本地开发还是线上部署都能正常生效：

  const Menu = [
      {
          id: 1,
          image: `${process.env.PUBLIC_URL}/images/maggi.jpg`,
          name: "Maggi",
          category: "Breakfast",
          price: 30,
          description: "Hi please select maggi here"
      },
  ]
  

• 核对文件和路径细节：

  • 确认public/images/maggi.jpg文件真实存在，文件名、后缀（比如是.jpg还是.jpeg）完全匹配
  • 留意大小写：Linux/macOS系统区分文件名大小写，确保代码里的路径和实际文件名一致

组件中渲染示例： #

确保在img标签中正确引用该路径：

{Menu.map(item => (
  <div key={item.id}>
    <img src={item.image} alt={item.name} />
    <p>{item.name}</p>
  </div>
))}

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