如何使用 React 中的 json 字段指向 src 图像标签以从本地目录渲染图像文件？

Question

我有关于如何使用

src

渲染图像的非常具体的案例。情况是我有 Flask 应用程序返回 json 对象

{
    "filepath": "0.jpg",
    "group": "terminator",
    "id": "0",
    "isClicked": false,
    "title": "image_0"
},
{
    "filepath": "1.jpg",
    "group": "terminator",
    "id": "1",
    "isClicked": false,
    "title": "image_1"
}

在文件目录中，我在反应应用程序之外有图像文件夹

问题是我如何设置img src来渲染

images

文件夹的图像，我已经尝试过

        <ul>
          {Object.values(items).map((item) => (
            <div key={item.id}>
              <li>
                {item.group} {item.title}
              </li>
              <img src={item.filepath} alt={item.title}/>
            </div>
          ))}
        </ul>

它渲染组和标题，但不渲染img，然后我尝试设置这样的相对路径

<img src={

../../images/${item.filepath}

} />

但它不起作用。请帮忙谢谢

Answer 1

哦，我刚刚做了这个

<img src={require(`../../images/${item.filepath}`).default} />

并且成功了

Answer 2

../../images/${item.filepath}).默认} />