title: Image import issue in reactjs
body: <p>I have a component, in which I've passed image url, but getting compiler error.</p>
  
  <p>Service.js</p>
  
  <pre><code>import React from 'react';
  
  const Service = (props) =&gt; {
    return (
      &lt;div className="col-sm-6 col-md-6 col-lg-6 col-6"&gt;
        &lt;div className="service"&gt;
          &lt;img src={require(props.URL)} alt="pencil_logo" /&gt;
          &lt;h4&gt;{props.Title}&lt;/h4&gt;
          &lt;p&gt;{props.Description}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Service;
  </code></pre>
  
  <p>About.js</p>
  
  <pre><code>const About = (props) =&gt; {
    console.log(props);
  
    let services = null;
  
    services = props.Services.map((x, index) =&gt; {
      return &lt;Service {...x} key={index} /&gt;;
    });
    return(
      &lt;div&gt;{services}&lt;/div&gt;
    );
  };
  export default About;
  </code></pre>
  
  <p>props.Services has the following values</p>
  
  <pre><code>{
    "Services": [
      {
        "Description": "testdata",
        "Title": "testdata",
        "URL": "../../../assets/images/site/pencil_tip.svg"
      },
      {
        "Description": "testdata2",
        "Title": "testdata2",
        "URL": "../../../assets/images/site/pencil_tip2.svg"
      },
      {
        "Description": "testdata3",
        "Title": "testdata3",
        "URL": "../../../assets/images/site/pencil_tip3.svg"
      }
    ]
  }
  </code></pre>
  
  <p>When I run this app, i'm getting this erro</p>
  
  <blockquote>
    <p>Uncaught Error: Cannot find module
    '../../../assets/images/site/pencil_tip.svg'</p>
  </blockquote>
  
  <p>But When I use like this, it works perfectly fine.</p>
  
  <pre><code>import pencil from'../../../assets/images/site/pencil_tip.svg';
  ...
  &lt;img src={pencil} alt="pencil_logo" /&gt;
  </code></pre>
  
  <p>Why it's not finding the image dynamically and how to fix this and why it finds the image if hardcoded?</p>
  
  <p>UPDATE #1:</p>
  
  <p>I'm getting this warning in my terminal while building</p>
  
  <pre><code>Compiled with warning
  ../xx/xx/Service.js
  Critical dependency: the request of a dependency is an expression
  </code></pre>