我开始在我的React应用程序中使用webpack捆绑图像，但它们不会显示在浏览器中（有一个<img/>标记，但没有图像）。如果我运行“webpack”，图像会出现在公共文件夹中的散列名称中，如果我运行“webpack-dev-server”，它也会显示图像被捆绑，但浏览器中仍然没有任何内容。这是我的webpack配置文件：

module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');

return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, './public/scripts'),
        filename: 'bundle.js'
    },
    module: {
            rules: [{
                 loader: 'babel-loader',
                 test: /\.js$/,
                 exclude: /node_modules/
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8000, // Convert images < 8kb to base64 strings
                        name: 'images/[hash]-[name].[ext]'
                    }
                }]
            },
            {
            test: /\.s?css$/,
            use: CSSExtract.extract({
                use : [
                    {
                        loader : 'css-loader',
                        options : {
                            sourceMap : true // source map for css in development
                        }
                    },
                    {
                        loader : 'sass-loader',
                        options : {
                            sourceMap : true
                        }
                    },
                    {
                        loader: "jshint-loader"
                    }
                ]
            })

        },
        ]
    },
    plugins : [
        CSSExtract,
    ],
    devtool: isProduction ? 'source-map' : 'cheap-eval-source-map', // source map for locating a bug in source files, not in the bundle
    devServer: {
        contentBase: path.join(__dirname, "public"),
        publicPath: "/scripts/",
        historyApiFallback: true // this line is for client-side routing
    },
}

}
这就是我如何将图像添加到应用程序中：

import img1 from '../../assets/img/ticket.jpg';

这就是我在render()方法中使用它的方法。

<img src={img1}/>

我在浏览器devtools中看到了这一点，但图像本身并不显示：

<img src="images/9011429377e91d003e5b64251ac3b9a8-ticket.jpg">

如何修复它并显示图像？