What is the correct way to include images in html using html-webpack-plugin in Webpack so that they are loaded in Prod assembly?

Question

Images

Webpack doesn't see images in html (multipage site) when prod builds.
Pictures are included: , during prod build the same path, but the error "Failed to load resource: net::ERR_FILE_NOT_FOUND" is given. Changing the path to images to or gives an error during dev build: " Error: Child compilation failed: Module not found: Error: Can't resolve './images/logo.svg' in 'C:\Ptojects\project\src\html\parts': Error: Can't resolve './images/logo.svg' in 'C:\Ptojects \fmf\project\src\html\parts' " The images folder in dist is moved on build. Thanks in advance for any help. All html via 'html-webpack-plugin':<img src="/images/logo.svg">
src="images/src="./images/

/html
-/parts
 --header.html
-/views
 --index.html
 --contacts.html

webpack.config:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
const fs = require('fs');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PAGES_DIR = path.join(__dirname, "./src/html/views");
const PAGES = fs
    .readdirSync(PAGES_DIR)
    .filter(fileName => fileName.endsWith(".html"));
module.exports = {
    entry: ["babel-polyfill", './src/js/app.js', './src/scss/main.scss'],
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/app.js',
        publicPath: '/',

    },
    module: {
...
        rules: [ 
{
                test: /\.html$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, './src/parts'),
                use: {
                    loader: 'html-loader',
                    options: {
                        interpolate: true,
                    }
                }
            },


            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 10000,
                            name: '[name].[ext]',
                            outputPath :  '/images/',
                        },
                    }
                ],

            },
...
plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/main.css',
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, './src/fonts'),
                to: path.resolve(__dirname, './dist/fonts'),
            },
            {
                from: path.resolve(__dirname, './src/images'),
                to: path.resolve(__dirname, './dist/images'),
            }
        ]),
        ...PAGES.map(
            page =>
                new HtmlWebpackPlugin({
                    template: `${PAGES_DIR}/${page}`,
                    filename: `./${page}`,
                    svgoConfig: {
                        removeTitle: false,
                        removeViewBox: true,
                    },
                })
        ),
        new HtmlWebpackInlineSVGPlugin({
            runPreEmit: true,


        }),
    ],