How to load image files with webpack file-loader
<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>