React：尝试在迭代组件中动态渲染来自公共文件夹的图像

Question

这是我的第一个问题。我已经搜索了几天，无法弄清楚我做错了什么。我是 React 和整个开发的新手，所以这很可能是我最大的障碍，但是，据我所知，这应该可行。

我正在尝试在迭代组件中动态渲染图像。图像本地托管在公用文件夹中。在我解决这个问题时，我正在使用 JSON 服务器来迭代我的数据。当我在组件中使用完整路径时，一切都很好：

<figure className="stone__card">
    <img className="stone__img"
        src={`${process.env.PUBLIC_URL}/assets/img/stone/BiancoSivec1.jpg`}
        alt="BiancoSivec"
    />
    <h3 className="stone__card-head">Bianco Sivec</h3>
    <p className="stone__card-type">Marbre</p>
</figure>

但是，由于我需要迭代和渲染许多项目，因此我动态尝试相同的方法，只是图像损坏了：

<figure className="stone__card">
  <img className="stone__img"
    src={stone.image}
    alt={stone.name}
   />
  <h3 className="stone__card-head">{stone.name}</h3>
  <p className="stone__card-type">{stone.type}</p>
</figure>

当我 console.log stone.image 时，我会收到相应的数据：

{`${process.env.PUBLIC_URL}/assets/img/stone/BiancoSivec1.jpg`}

我曾尝试在我的 db.json 文件中删除/添加大括号，但无济于事。我错过了什么，或者只是不允许这样做？我去过 React docs Using Public Folder，也没有找到任何东西。有人可以指出我正确的方向吗？

这是我正在使用的 db.json 文件：

{
    "stones": [
        {
            "id": 1,
            "important": true,
            "name": "Bianco Sivec",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "{`${process.env.PUBLIC_URL}/assets/img/stone/BiancoSivec1.jpg`}"
        },
        {
            "id": 2,
            "important": true,
            "name": "Imperial White",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "{`${process.env.PUBLIC_URL}/assets/img/stone/ImperialWhite1.jpg`}"
        },
        {
            "id": 3,
            "important": true,
            "name": "Fantasy White",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "{`${process.env.PUBLIC_URL}/assets/img/stone/FantasyWhite1.jpg`}"
        },
        {
            "id": 4,
            "important": true,
            "name": "Infinito",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "{`${process.env.PUBLIC_URL}/assets/img/stone/Infinito1.jpg`}"
        }
    ]
}

这是实际日志的图像：

Image of log

Answer 1

JSON 格式不支持模板文字，也没有环境变量。

因此，您需要删除模板文字并将您的json 文件转换为以下形式，以便获得相对路径：

{
    "stones": [
        {
            "id": 1,
            "important": true,
            "name": "Bianco Sivec",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "assets/img/stone/BiancoSivec1.jpg"
        },
        {
            "id": 2,
            "important": true,
            "name": "Imperial White",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "assets/img/stone/ImperialWhite1.jpg"
        },
        {
            "id": 3,
            "important": true,
            "name": "Fantasy White",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "assets/img/stone/FantasyWhite1.jpg"
        },
        {
            "id": 4,
            "important": true,
            "name": "Infinito",
            "type": "Marbre",
            "color": "Blanc",
            "origin": "Macédoine",
            "finish": "Poli",
            "thickness": "3cm, 2cm",
            "image": "assets/img/stone/Infinito1.jpg"
        }
    ]
}

并在组件中，使用模板文字，将相对链接转换为绝对路径。

<figure className="stone__card">
  <img className="stone__img"
    src={`${process.env.PUBLIC_URL}/${stone.image}`}
    alt={stone.name}
   />
  <h3 className="stone__card-head">{stone.name}</h3>
  <p className="stone__card-type">{stone.type}</p>
</figure>