How to bundle images in Webpack added via jsDOM?

Question

webpack

I create an img element in js and add src to it. The element itself appears, but the image is not available, but all other images created in html are successfully added to the bundle and are also successfully displayed. What should be done?

js

this.close = document.createElement('img')
this.close.src = "../img/close.png"

webpack.config

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

module.exports = {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', 
        } 
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html', 
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};