Question

我创建了对象数组，并在其中给出了图像路径。我无法使用react从对象数组中加载图像，并且收到诸如“找不到模块”之类的错误。我在过去的2天中一直坚持使用此问题，请任何人帮助我解决此问题或给出我对下一步的建议。我在下面分享了您的代码段：

    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>
        );
      }

如何从对象数组中加载图像进行反应？

Answer 1

您无需在src中添加require。当使用相对路径时，它将在您的服务器中可用图像，但是当给出url时将加载图像。您可以找到更多信息here

将src用作/images/lenovo-p50.jpg时，它将转换为localhost:3000/images/lenovo-p50.jpg

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

1 个答案: