React：尝试在迭代组件中动态呈现 public 文件夹中的图像

Question

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

我正在尝试在迭代组件中动态呈现图像。图像本地托管在 public 文件夹中。当我解决这个问题时，我正在使用 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.logstone.image时，我收到相应的数据：

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

我试过在我的 db.json 文件中摆弄 removing/adding 大括号，但无济于事。我是不是遗漏了什么，或者只是不允许这样做？我去过 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"
        }
    ]
}

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

<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>

React：尝试在迭代组件中动态呈现 public 文件夹中的图像

React: Trying to render images from public folder dynamically in iterated component

image

render

public

dynamic

reactjs