How to display an image in React + Redux (webpack)?

Question

React

I'm trying to learn react + redux. I ran into a stupid problem, I've been googling for an hour and a half. There are a lot of similar problems, and the solutions described do not help.
So, I start the server on my localhost:3000 with the following structure:

Styles are connected in index.js like this:
import './styles/compiled/app.css'
Styles have rules:

body {
    background: url(/assets/back.jpg);
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
}

I start the server, run to the browser and see in the inspector for the following properties:

body {
    background: url(http://localhost:3000/assets/back.jpg);
    background-size: cover;
    font-family: 'Open Sans',sans-serif;
}

I go directly to the URL of the image, I get the inscription: "Cannot GET /assets/back.jpg".
I googled that the problem might be in the WebPack config, put the image loader, it seems, but alas.
So the question is:
Where to put pictures (MB leave there) and what needs to be done to make them appear?
webpack config:

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        'babel-polyfill',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer(),
                ]
            }
        })
    ],
    module: {
        rules : [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'react-hot-loader',
                    },
                    {
                        loader: 'babel-loader',
                    },
                ],
                include: [
                    path.resolve(__dirname, "src"),
                ]
            },
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [
                    path.resolve(__dirname, "src"),
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            // localIdentName: "[name]--[local]--[hash:base64:8]"
                            localIdentName: "[local]"
                        }
                    },
                    "postcss-loader" // has separate config, see postcss.config.js nearby
                ]
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                exclude: /node_modules/,
                loader:'url-loader?limit=1024&name=images/[name].[ext]'
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
            }

        ]
    }
};

Answer 1

you take pictures from a folder assetsand then after assembly you send them there. somehow it's strange. maybe it's better to create a folder /src/images, and in the config

{
      test: /\.(jpg|jpeg|gif|png)$/,
       include: path.resolve(__dirname, "src/images"),
       loader:'url-loader?limit=1024&name=images/[name].[ext]'
   }

and in styles

body {
    background: url(../../assets/back.jpg);
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
}