How to set image paths in CSS when building in webpack?

Question

webpack

Good afternoon! The question seems to me to be about file-loader
Problem
When building, links look like this:
- in html: /img/ (images are displayed)
- in css: /img/ (image is NOT displayed)
the correct path should be .. / img/ (checked, it works like this)

If you go to webpack.config

{
        test: /\.(png|jpe?g|gif)$/i,
        use:[
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath:'img',
              publicPath:'/img/'
            },
          } 
        ],
      }

That is, both in html and in css the same path is formed, specified in publicPath:'/img/'
How to configure file-loader so that in html files there is a path /img/ and in CSS .. /img/?

My webpack:

const autoprefixer = require('autoprefixer');
const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({}),
      new UglifyJsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 4200
  },
  plugins: [
    new HTMLPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),
    new HTMLPlugin({
      filename: 'products.html',
      template: './src/products.html'
    }),
    new HTMLPlugin({
      filename: 'productend.html',
      template: './src/productend.html'
    }),
    new HTMLPlugin({
      filename: 'services.html',
      template: './src/services.html'
    }),
    new HTMLPlugin({
      filename: 'newsend.html',
      template: './src/newsend.html'
    }),
    new HTMLPlugin({
      filename: 'about.html',
      template: './src/about.html'
    }),
    new HTMLPlugin({
      filename: 'contacts.html',
      template: './src/contacts.html'
    }),
    new HTMLPlugin({
      filename: 'news.html',
      template: './src/news.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ],
  resolve: {
    extensions: ['.js', '.ts', '.css', '.less']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      },
      { 
        test: /\.(js|ts)$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        // exclude: [/node_modules/, require.resolve('./src/productend.html')],
        use:[
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath:'img',
              publicPath:'/img/'
            },
          }
           
        ],
      
      } 
    ],
  }
};