title: Load images using React/Webpack
body: <p>I set up the rule in <code>webpack</code> to load <code>png</code> images:</p>
  
  <pre><code>   {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'file?hash=sha512&amp;digest=hex&amp;name=[hash].[ext]',
        'image-webpack?bypassOnDebug&amp;optimizationLevel=7&amp;interlaced=false'
      ]
      }
  </code></pre>
  
  <p>That I found here: <a href="https://stackoverflow.com/questions/35568114/cannot-load-png-files-with-webpack-unexpected-character">cannot load png files with webpack, unexpected character</a></p>
  
  <p><code>Webpack</code> seems to be working fine, giving no errors. So, I tried loading the png images paths that are located at <code>app_folder/public/images/pca</code> inside the <code>render</code> method:</p>
  
  <pre><code>  importAll = (r) =&gt; {
      return r.keys().map(r);
    }
  
    render() {
      const pca_images = this.importAll(require.context('../public/images/pca', 
      false, /\.(png|jpe?g|svg)$/));
        console.log('pca_images')
        console.log(pca_images)
  ...
  }
  </code></pre>
  
  <p>When I launch the app I do not see any errors but the <code>pca_images</code> is an empty array. The component itself is located at <code>app_folder/views/</code>. I tried loading the images also directly like that:</p>
  
  <pre><code> &lt;img src={ require('../public/images/image1.png') } /&gt;
  </code></pre>
  
  <p>But whatever path I specify, it is just not working giving an error. I need to load all images from the folder <code>app_folder/public/images/pca</code> though, not just statically since I do not know the names of the images beforehand. Any suggestions would be greatly appreciated.</p>