Реагировать Локальные изображения не загружаются на странице с Webpack

Question

Я пытаюсь создать реактивный проект с нуля с помощью веб-пакета. Все выглядит хорошо, кроме изображения. Кажется, изображения не загружаются, я вижу src = "Объект объекта". В приведенном ниже веб-пакете я использовал один и тот же загрузчик файлов и url-загрузчик, но neithrt помогает мне решить эту проблему. Возможно, я что-то пропустил в файле конфигурации.

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;

Я использовал тег изображения, как показано ниже, в компоненте реакции.

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

Answer 1

Вы пытались использовать свое изображение в своем компоненте, например:

import Image from './image.jpg';

<img src={Image}/>

См .: Ссылка на локальное изображение в реакции