使用 Webpack 反应本地图像未加载到页面中

Question

我正在尝试使用 webpack 从头开始​​创建反应项目。除了图像，一切看起来都很好。似乎没有加载图像，我可以看到 src="Obeject Object"。我在下面的 webpack 上使用了相同的文件加载器和 url-loader，但没有帮助我解决这个问题。我可能遗漏了配置文件中的某些内容。

var webpack = require('webpack');
var path = require('path');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var buildPath = path.resolve(__dirname, 'public', 'build');
var assetsPath = path.resolve(__dirname, 'src/app/assets');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {

    devtool: 'eval-source-map',
    devServer: {
        historyApiFallback: true
    },
    entry: {
        index: ['babel-polyfill', './src/app/index.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                use: 'babel-loader',
                exclude: nodeModulesPath
            },

            {
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'file-loader',
                options: {
                  publicPath: assetsPath,
                },
            },
            {
                test: /\.s[ac]ss$/i,
                include: [
                    nodeModulesPath,
                    path.resolve(__dirname, './src'),
                ],
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/app/index.html'
        })
    ],
    devServer: {
        host: '0.0.0.0',//your ip address
        port: 3000,
        historyApiFallback: true,
        contentBase: './',
        hot: true
    },
    target: 'web'
};

module.exports = config;

我在 react 组件中使用了像下面这样的图像标签。

<img src={require('./../assets/images/logo.png')} />

Answer 1

您是否尝试过在组件中使用您的图片，例如：

import Image from './image.jpg';

<img src={Image}/>

见：Referencing a local image in react