How to load the images from JSON object using react?

Question

I have created the array of objects and i gave image path in that. I couldn't able to load the images from the array of objects using react and am getting an error like "module not found".I have stuck with this issue for past 2 days, kindly anyone help me out in fixing this issue or give me some suggestion for what to do next. I shared you the code snippet below:

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

How to load the images from the array of objects in react?

Umair Farooq · Accepted Answer · 2019-01-24 06:53:13Z

2

You don't need to add require in src. When relative path is used it will go the images availale in your server but when url is given image will be loaded. You can find more info here

When using src as /images/lenovo-p50.jpg it will convert to localhost:3000/images/lenovo-p50.jpg

answered Jan 24, 2019 at 6:53

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load the images from JSON object using react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related