title: importing image dynamically (React Js) (Require img path cannot find module)
body: <p>I need to import images(several) from my image file dynamically by a map method. First, I want to set a base URL to my images file and then read the image's name from my JSON file which includes the image property and then set the image src accordingly. 
  The JSON file is like below :</p>
  
  <pre><code>{
        "title": "Blue Stripe Stoneware Plate",
        "brand": "Kiriko",
        "price": 40,
        "description": "Lorem ipsum dolor sit amet...",
        "image": "blue-stripe-stoneware-plate.jpg"
      },
      {
        "title": "Hand Painted Blue Flat Dish",
        "brand": "Kiriko",
        "price": 28,
        "description": "Lorem ipsum dolor sit amet...",
        "image": "hand-painted-blue-flat-dish.jpg"
      },
  </code></pre>
  
  <p>my images folder : <a href="https://i.stack.imgur.com/lSSSX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lSSSX.png" alt="enter image description here"></a></p>
  
  <p>I have read the products by redux which is works perfectly  =></p>
  
  <pre><code>const products = this.props.products;
  console.log(products, 'from redux'); 
  const fetchProducts = [];
      for (let key in products) {
        fetchProducts.push({
          ...products[key]
        });
      }
  </code></pre>
  
  <p>the console.log() => <a href="https://i.stack.imgur.com/H8w72.png" rel="noreferrer"><img src="https://i.stack.imgur.com/H8w72.png" alt="enter image description here"></a></p>
  
  <p>Now I want to define a base URL like this which later use as image src by adding the image's name from the JSON file in the map method :</p>
  
  <pre><code>const baseUrl = '../../components/assets/images/';
  const fetchProducts = [];
  for (let key in products) {
    fetchProducts.push({
      ...products[key]
    });
  }
  
  const productCategory = fetchProducts.map((product, index) =&gt; {
    return (
      &lt;Photo
        key={index}
        title={product.title}
        brand={product.brand}
        description={product.description}
        imageSource={baseUrl + product.image}
        imageAlt={product.title}
      /&gt;
    );
  });
  </code></pre>
  
  <p>my Photo component looks like below :</p>
  
  <pre><code>  const photo = props =&gt; (
    &lt;div className={classes.Column}&gt;
      &lt;img src={require( `${ props.imageSource }` )} alt={props.imageAlt} /&gt;
      &lt;div className={classes.Container}&gt;
        &lt;p&gt;{props.brand}&lt;/p&gt;
        &lt;p&gt;{props.title}&lt;/p&gt;
        &lt;p&gt;{props.price}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  export default photo;
  </code></pre>
  
  <p>unfortunately, I have faced this error: <a href="https://i.stack.imgur.com/Xz4QQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Xz4QQ.png" alt="enter image description here"></a>
  Thanks in advance and sorry for my bad English :) </p>