title: Cannot retrieve images in my react component
body: <p>I am quite new at coding so please be indulgent... I searched a lot and I don't manage to get my issue fixed :(</p>
  
  <p>I would like to get my images rendered through and html img tag. I saw that the best way in react is to import my images. Like this :</p>
  
  <pre><code>import avatar from './avatar.png';
  
  export default class Connection extends React.Component {
    render () {
        return (
          &lt;div&gt;
            {this.props.user.firstname}&amp;nbsp;{this.props.user.lastname}
            &amp;nbsp;&lt;img src={avatar} className='img-circle' /&gt;
            &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href='#' onClick={this.props.logout}&gt;Déconnexion&lt;/a&gt;
          &lt;/div&gt;
        );
    }
  }
  </code></pre>
  
  <p>I use the following webpack config to load these images :</p>
  
  <pre><code>module: {
      loaders: [
        { test: /\.jsx?$/, exclude: [/node_modules/], loader: 'babel' },
        { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },
        { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'file-loader?hash=sha512&amp;digest=hex&amp;name=[path][name]-[hash].[ext]' },
        { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'url-loader?limit=10000' }
      ]
    }
  </code></pre>
  
  <p>I see that webpack manage to load the jpg or png files but when it comes to display it, it seems that the file generated/copied is not available (ex: /MyApp/avatar-50b93a2df8aec266d7c8c1c0f5719d1b.png is not available).</p>
  
  <p>I use the webpack dev server so I don't see my files bundled and the dist or build folder created.</p>
  
  <p>Any idea of solving my issue ? </p>
  
  <p>Thanks,</p>
  
  <p>When using the require within the img tag I get the following error :</p>
  
  <p>Module not found: Error: Cannot resolve 'file' or 'directory' ./avatar</p>
  
  <p>I tried to get the extension in the webpack config but it does not solve anything :(</p>
  
  <p>Here is my public path config in my webpack config :</p>
  
  <pre><code>output: {
      path: path.join(__dirname, '/build'),
      publicPath: '/',
      filename: 'bundle.js'
    }
  </code></pre>