0

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

Rahmi Pruitt
  • 569
  • 1
  • 8
  • 28

2 Answers2

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.

Kishan Mundha
  • 2,989
  • 18
  • 26
  • When I research displaying images, it seemed programmer agreed the backend should only serve paths because storing images is too costly. https://stackoverflow.com/questions/3748/storing-images-in-db-yea-or-nay – Rahmi Pruitt Jun 27 '18 at 18:09
  • Yes, server will serve url only from database. But that url also related to server. We are not going to store image in database – Kishan Mundha Jun 27 '18 at 18:13
  • If I knew you in real life, I would hug you. – Rahmi Pruitt Jun 27 '18 at 22:22
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} ...
Faizan Virani
  • 134
  • 1
  • 11
  • 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 – Rahmi Pruitt Jun 27 '18 at 04:01
  • You can if you change your arrow function body to be a block body. See 'Function Body' section here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Faizan Virani Jun 27 '18 at 04:33