React项目加载含空格的文件/文件夹触发ENOENT错误如何解决

路径编码处理 #

URL规范不允许直接携带空格，你当前定义的图片路径中包含未编码的空格是触发报错的核心原因，无需修改文件夹/文件名的修复方式如下：

方案1：直接修改路径配置 #

将路径中的空格替换为URL编码值%20即可：

products: [
  {
    name: "Gotham",
    category: "NY",
    image: "/images/Homepage%20and%20Store/Gotham.jpg",
    countInStock: 5,
  },
  // 其余项同理修改
]

方案2：渲染时动态编码 #

不需要修改原有数据配置，在渲染图片标签时用encodeURI()方法包裹路径参数即可自动完成空格转义：

{products.map((product, index) => (
<img
  className="absolute object-contain w-full h-full"
  src={encodeURI(product.image)}
  alt={product.name}
/>
)}

配置校验补充 #

你当前的server.js静态资源托管配置本身不存在问题，只要确认images文件夹存放在项目的public根目录下，打包时会自动同步到build目录中，无需额外修改服务端配置。

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