title: Dynamically Add Images React Webpack
body: <p>I've been trying to figure out how to dynamically add images via React and Webpack.  I have an image folder under <strong>src/images</strong>  and a component under <strong>src/components/index</strong>.  I'm using url-loader with the following config for webpack</p>
  
  <pre><code>    {
        test: /\.(png|jpg|)$/,
        loader: 'url-loader?limit=200000'
      }
  </code></pre>
  
  <p>Within the component I know I can add <strong>require(image_path)</strong> for a specific image at the top of the file before I create the component but I want make the component generic and have it take a property with the path for the image that is passed from the parent component.  </p>
  
  <p>What I have tried is:</p>
  
  <pre><code>&lt;img src={require(this.props.img)} /&gt;
  </code></pre>
  
  <p>For the actual property I have tried pretty much every path I can think of to the image from the project root, from the react app root, and from the component itself.</p>
  
  <p>Filesystem </p>
  
  <pre><code>|-- src
  |   ` app.js
  |   `--images
  |      ` image.jpg
  |      ` image.jpg
  |   `-- components
  |      `parent_component.js
  |      `child_component.js
  </code></pre>
  
  <p>The parent component is basically just a container to hold multiples of the child so...</p>
  
  <pre><code>&lt;ChildComponent img=data.img1 /&gt;
  &lt;ChildComponent img=data.img2 /&gt;
  etc....
  </code></pre>
  
  <p>Is there any way in which to do this using react and webpack with url-loader or am I just going down a wrong path to approach this?</p>