Import images in react in a loop

Question

What I am trying to accomplish is importing each file from the proper directory. My backend code saves files to the images directory, and my frontend directory is where I hold my React.js code.

The structure of my directory can be seen below.

-- Backend
   -- backend code
-- Frontend
   -- frontend code
-- images
   -- user_1
      -- People.jpg
   -- user_2
      ...

As you can see, I am getting the path from the backend. imagePath will look something like this "../images/user_1/People.jpg". I saw another stackoverflow post store the image in const variable using the require keyword, but I received an error using that method.

@observer
export default class SnapCapsule extends React.Component {
  componentDidMount() {
    axios.get(`${this.props.domain}/snapcapsule`)
      .then(res => {
        res.data.map((capsule) => {
          var domainSize = this.props.domain.length+13;
          var imagePath = "../" + capsule["image"].substring(domainSize);
          var dateToPost = capsule["dateToPost"].substring(0, 10);
          var username = capsule["username"];
          console.log(capsule["caption"], imagePath, dateToPost, username);
          this.props.store.addCapsule(
            capsule["caption"],
            imagePath,
            dateToPost,
            username
          )
        })
      });
  }

  componentWillUnmount() {
    this.props.store.clear();
  }


  render() {
    const { capsules } = this.props.store;
    const capsuleList = capsules.map((capsule, i) => (
    <Col key={i} xs={6} md={4}>
      <Thumbnail src={capsule.imagePath} alt="242x200">
        <h3> {capsule.title} </h3>
        <p> @{capsule.username} </p>
      </Thumbnail>
    </Col>
  ));

return (
  <Grid>
    <Row>
      { capsuleList }

    </Row>
  </Grid>
);

}

    return (
      <Grid>
        <Row>
          { capsuleList }

        </Row>
      </Grid>
    );
  }
}

Answer

Instead of providing a path to the image tag in the directory. I configured the backen to be retrieved photos through urls.

capsule.imagePath => http://localhost:8000/snapcapsule/images/user_1/People.jpeg

Kishan Mundha · Accepted Answer · 2018-06-27 04:12:15Z

2

I suggest avoid dynamic require for dynamic condition. While bundling you it may not include all your image and may cause issue.

In your condition, you are fetching information from server and trying to import file directly from folder which is not correct way. As web application you should use a web url to show images.

In response of capsuleList, you have image path. Use that path and your backend should handle request and return image. It's backend responsibility. While react running on browser, react don't have permission to access folder but your backend can access folders.

In your backend, read image and server it.

answered Jun 27, 2018 at 4:12

Kishan Mundha

3,15120 silver badges26 bronze badges

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

3 Comments

Rahmi Pruitt Over a year ago

When I research displaying images, it seemed programmer agreed the backend should only serve paths because storing images is too costly. stackoverflow.com/questions/3748/…

Kishan Mundha Over a year ago

Yes, server will serve url only from database. But that url also related to server. We are not going to store image in database

Rahmi Pruitt Over a year ago

If I knew you in real life, I would hug you.

Faizan Virani · Accepted Answer · 2018-06-27 03:55:43Z

0

You should be able to actually reference those images directly in your thumbnail component without importing it as a module or anything like that.

const path = "./../../images/user_1/People.jpg";
<Thumbnail src={path} ...

answered Jun 27, 2018 at 3:55

Faizan Virani

1791 silver badge11 bronze badges

2 Comments

Rahmi Pruitt Over a year ago

That is not going to work because I cannot declare variables in capsules.map((capsule, i) => (error const path = capsule.imagePath ), and the only way to see the imagePath in a capsule is through capsule.imagePath

Faizan Virani Over a year ago

You can if you change your arrow function body to be a block body. See 'Function Body' section here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Import images in react in a loop

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related