ReactJS项目无法加载db.json配置图片问题求助

我的React代码无法显示db.json中的图片，图片信息已成功加载，但始终无法渲染出来。

请问可能的原因是什么？

• 我判断图片信息存储在json文件而非js文件中，这个说法正确吗？

我原本以为可以从js文件中读取图片，尝试了以下路径：

• ../../img/clothing/etc.webp
• ../../img/giyim/etc.webp

我还调整过文件位置，但图片仍然无法加载/显示。

相关代码 #

<div className="products">
  <div className="product-wrapper">
    {this.props.products.map((product) => (
      <div className="product" key={product.id}>
        <img src={product.image} alt={product.id}></img>
        {/* <div>{product.id}</div> */}
        <div>
          <Link to={"/saveproduct/" + product.id}>
            {product.productName}
          </Link>
        </div>
        <div>{product.unitPrice}</div>
        {/* <td>{product.quantityPerUnit}</td>
        <td>{product.unitsInStock}</td> */}
        <span>
          <Button color="info" onClick={() => this.addToCart(product)}>
            Sepet
          </Button>
        </span>
      </div>
    ))}
  </div>
</div>

db.json配置 #

{
  "products": [
    {
      "id": "bicak1",
      "productName": "FleshEdge Bıçak N690 ... Suya Dayanıklı",
      "categoryId": 1,
      "unitPrice": "5699",
      "image": "img/giyim/soft-set2.webp",
      "quantityPerUnit": "30",
      "unitsInStock": "31"
    }
  ],
  "categories": [
    {
      "id": "1",
      "categoryName": "Bıçaklar",
      "seoUrl": "bicaklar"
    }
  ]
}

可能的原因及解决办法 #

1. 静态资源路径错误
   React项目中，放在public目录下的静态资源需要用根路径开头的绝对路径引用。如果你的img文件夹在public目录内，db.json里的图片路径应该改为/img/giyim/soft-set2.webp（前面加斜杠）。相对路径会基于当前组件的位置解析，容易出现路径错误。

2. 资源未被正确识别
   如果img文件夹不在public目录而在src下，直接用字符串路径无法让Webpack正确打包图片。这种情况建议把图片移到public目录，或者在代码中通过require(product.image)来引入，但后者需要确保路径是相对于当前文件的正确相对路径，不如用public目录方便。

3. 路径拼写/大小写问题
   检查图片文件名、文件夹名的拼写是否完全匹配，注意Linux/macOS系统区分大小写，Windows不区分，避免因大小写不一致导致加载失败。同时确认图片后缀名（比如.webp）是否正确。

4. 关于你的判断
   你的判断是正确的：图片信息（路径字符串）确实存储在db.json文件中，而非js文件。React会读取这个路径字符串，然后根据路径去加载对应的图片文件。

内容的提问来源于stack exchange，提问作者Fatih İnan