Javascript 如何使用react从JSON对象加载图像？

我已经创建了对象数组，并在其中给出了图像路径。我无法使用react从对象数组中加载图像，并且出现了“找不到模块”之类的错误。我在过去的两天中一直存在此问题，请任何人帮助我解决此问题，或者为我下一步的操作提供一些建议。我将下面的代码片段分享给您：

    state = {
        data: [
          {
            id: 1,
            name: "Mattel Uno Playing Card Game",
            imagePath: "../images/lenovo-p50.jpg"
          },
          {
            id: 2,
            name: "Hot Wheels Car",
            imagePath: "../images/lenovo-p51.jfif"
          },
          {
            id: 3,
            name: "Centy Toys Ambassador Car",
            imagePath: "../images/lenovo-p50.jpg"
          }
        ]
      };

      render() {
        return (
          <div>
            <table>
              <thead>
                <tr>
                  <th>Item Name</th>
                  <th>Item images</th>
                </tr>
              </thead>
              <tbody>
                {this.state.data.map((ele, i) => {
                  return (
                    <tr key={ele.id}>
                      <td>{ele.name}</td>
                      <td>
                        <img src={require(ele.imagePath)} width="200" />
                      </td>
                    </tr>
                  );
                })}
                <tr />
              </tbody>
            </table>
          </div>
        );
      }

状态={
数据：[
{
id:1，
名称：“美泰Uno纸牌游戏”，
imagePath:“../images/lenovo-p50.jpg”
},
{
id:2，
名称：“热轮汽车”，
imagePath:“../images/lenovo-p51.jfif”
},
{
id:3，
名称：“世纪玩具大使车”，
imagePath:“../images/lenovo-p50.jpg”
}
]
};
render（）{
返回(
项目名称
项目图像
{this.state.data.map（（ele，i）=>{
返回(
{ele.name}
);
})}
);
}

---

如何从react中的对象数组加载图像？

您不需要在src中添加

require

。当使用相对路径时，它将转到服务器中可用的图像，但当url给定时，图像将被加载。你可以找到更多信息

---

当使用src作为

/images/lenovo-p50.jpg

时，它将转换为

localhost:3000/images/lenovo-p50.jpg

您不需要在src中添加

require

。当使用相对路径时，它将转到服务器中可用的图像，但当url给定时，图像将被加载。你可以找到更多信息

使用src作为

/images/lenovo-p50.jpg

时，它将转换为

localhost:3000/images/lenovo-p50.jpg