How to correctly set paths in file-loader?

Question

webpack

Hello! I have the following structure in /src
| index.html
+---css
| style.css
+---img
| image.jpg
and here is the config:

const path = require(`path`);
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: `development`,
  entry: `./src/index.js`,
  output: {
    filename: `[name].js`,
    path: path.join(__dirname, `public`)
  },
  optimization: {
    splitChunks: {
      name: 'vendor',
      chunks: 'all',
    },
  },
  plugins: [
    ...['index','catalog'].map((event) => {
      return new HtmlWebpackPlugin({
        template: `./src/${event}.html`,
        filename: `${event}.html`,
      })
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    })
  ],
  devtool: `source-map`,
  devServer: {
    contentBase: path.join(__dirname, `public`),
    publicPath: `http://localhost:8080`,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(css|scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'img',
            publicPath: '../img',
          }
        }
      },
    ]
  }
};

In css I load the file like this: and in .html: everything works fine on the dev-server, but when building, the path to the file from html breaks. I can not figure out how to properly load files in this case. Thanks in advance!
background-image: url("../img/modal-map.jpg");
<img src="<%= require('./img/slide.jpg') %>">