Как загрузить изображения из JSON-объекта с помощью реакции?

Question

Я создал массив объектов и в нем указал путь к изображению. Я не смог загрузить изображения из массива объектов с помощью реакции и получаю сообщение об ошибке типа «модуль не найден». Я застрял с этой проблемой в течение последних 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

Вам не нужно добавлять require в src.Когда используется относительный путь, он будет доступен для загрузки на вашем сервере, но при задании URL будет загружено изображение.Вы можете найти больше информации здесь

При использовании src в качестве /images/lenovo-p50.jpg он преобразуется в localhost:3000/images/lenovo-p50.jpg