title: How to load image files with webpack file-loader
body: <p>I am using <strong>webpack</strong> to manage a <strong>reactjs</strong> project. I want to load images in javascript by webpack <code>file-loader</code>. Below is the <strong>webpack.config.js</strong>:</p>
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const NpmInstallPlugin = require('npm-install-webpack-plugin');
  
  const PATHS = {
      react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
      app: path.join(__dirname, 'src'),
      build: path.join(__dirname, './dist')
  };
  
  module.exports = {
      entry: {
          jsx: './app/index.jsx',
      },
      output: {
          path: PATHS.build,
          filename: 'app.bundle.js',
      },
      watch: true,
      devtool: 'eval-source-map',
      relativeUrls: true,
      resolve: {
          extensions: ['', '.js', '.jsx', '.css', '.less'],
          modulesDirectories: ['node_modules'],
          alias: {
              normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
          }
      },
      module: {
          preLoaders: [
  
              {
                  test: /\.js$/,
                  loader: &quot;source-map-loader&quot;
              },
          ],
          loaders: [
  
              {
                  test: /\.html$/,
                  loader: 'file?name=[name].[ext]',
              },
              {
                  test: /\.jsx?$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader?presets=es2015',
              },
              {test: /\.css$/, loader: 'style-loader!css-loader'},
              {test: /\.(jpe?g|png|gif|svg)$/i, loader: &quot;file-loader?name=/public/icons/[name].[ext]&quot;},
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loaders: ['babel-loader?presets=es2015']
              }
          ]
      },
      plugins: [
          new webpack.optimize.UglifyJsPlugin({
              compress: {
                  warnings: false,
              },
              output: {
                  comments: false,
              },
          }),
          new NpmInstallPlugin({
              save: true // --save
          }),
          new webpack.DefinePlugin({
              &quot;process.env&quot;: {
                  NODE_ENV: JSON.stringify(&quot;production&quot;)
              }
          }),
      ],
      devServer: {
          colors: true,
          contentBase: __dirname,
          historyApiFallback: true,
          hot: true,
          inline: true,
          port: 9091,
          progress: true,
          stats: {
              cached: false
          }
      }
  }
  </code></pre>
  <p>I used this line to load image files and copy them to dist/public/icons directory and keep the same file name.</p>
  <pre><code>{test: /\.(jpe?g|png|gif|svg)$/i, loader: &quot;file-loader?name=/public/icons/[name].[ext]&quot;}
  </code></pre>
  <p>But I have two problems when using it. When I run <code>webpack</code> command, the image file was copied to <strong>dist/public/icons/</strong> directory as expected. However it was also copied to dist directory with this file name &quot;df55075baa16f3827a57549950901e90.png&quot;.</p>
  <p>Below is my project structure:
  <a href="https://i.stack.imgur.com/cKom9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cKom9.png" alt="enter image description here" /></a></p>
  <p>Another problem is that I used below code to import this image file but it is not showing on the browser. If I am using url 'public/icons/imageview_item_normal.png' on the img tag, it works fine. How to use the object imported from the image file?</p>
  <pre><code>import React, {Component} from 'react';
  import {render} from 'react-dom';
  import img from 'file!../../public/icons/imageview_item_normal.png'
  
  export default class MainComponent extends Component {
  
    render() {
      return (
        &lt;div style={styles.container}&gt;
          download
          &lt;img src={img}/&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  const styles = {
    container: {
      width: '100%',
      height: '100%',
    }
  }
  </code></pre>