title: Import images in react in a loop
body: <p>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.</p>
  
  <p>The structure of my directory can be seen below.</p>
  
  <pre><code>-- Backend
     -- backend code
  -- Frontend
     -- frontend code
  -- images
     -- user_1
        -- People.jpg
     -- user_2
        ...
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>@observer
  export default class SnapCapsule extends React.Component {
    componentDidMount() {
      axios.get(`${this.props.domain}/snapcapsule`)
        .then(res =&gt; {
          res.data.map((capsule) =&gt; {
            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) =&gt; (
      &lt;Col key={i} xs={6} md={4}&gt;
        &lt;Thumbnail src={capsule.imagePath} alt="242x200"&gt;
          &lt;h3&gt; {capsule.title} &lt;/h3&gt;
          &lt;p&gt; @{capsule.username} &lt;/p&gt;
        &lt;/Thumbnail&gt;
      &lt;/Col&gt;
    ));
  
  return (
    &lt;Grid&gt;
      &lt;Row&gt;
        { capsuleList }
  
      &lt;/Row&gt;
    &lt;/Grid&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <pre><code>    return (
        &lt;Grid&gt;
          &lt;Row&gt;
            { capsuleList }
  
          &lt;/Row&gt;
        &lt;/Grid&gt;
      );
    }
  }
  </code></pre>
  
  <p>Answer</p>
  
  <p>Instead of providing a path to the image tag in the directory. I configured the backen to be retrieved photos through urls.</p>
  
  <p>capsule.imagePath => <a href="http://localhost:8000/snapcapsule/images/user_1/People.jpeg" rel="nofollow noreferrer">http://localhost:8000/snapcapsule/images/user_1/People.jpeg</a></p>