WebPack images not loading using file-loader

Currently, I have a webpack 5 project that requires several svg images and a background image. The svg images are coded into the template.html file. and the background image is referenced in the style.css file. When I run the build, none of the images are built on the webpage. They remain in hashed form (even though I am using a custom name within the file loader test.

Below is the current webpack config file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/template.html',
        }),
      ],
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'docs'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use:['style-loader','css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpe?g|gif)$/i,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/images/'
                      }
                    }
                ]
            },
            {
                test:/\.html$/,
                use: [
                  'html-loader'
                ]
              },
        ],
    },
};

Below is a snippet to show how the svg

<div class="studyTime">
      <div id="timeManager">
        <div id="toDoButtons">
          <button id="new"><img src="./assets/images/add.svg" alt=""></button>
          <button id="clear"><img src="./assets/images/clear.svg" alt=""></button>
        </div>
        <div id="todo">

        </div>
      </div>
      <img class="openDrawer" id="timeOpen" src="./assets/images/left.svg" alt="">
    </div>
    <div class="clock">
      <div class="clock-face">
        <div class="core"></div>
        <div class="hand" id="hour-hand"></div>
        <div class="hand" id="min-hand"></div>
        <div class="hand" id="second-hand"></div>
      </div>
    </div>

Finally, here is an image of the program when built: Build with image error

I have tried to use the file-loader format, as well as removing it. My file structure looks as follows:

file structure

I am not receiving any errors, and the images appear within the bundled code, but in hashed form and are not appearing in the live website.

you need html-loader and html webpack plugin . it Will rewrite your html file with hashed names.

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, './dist/js/index.html'),
      template: path.resolve(__dirname, './src/template.html')
    })
  ]

and replace svg rule with

module: {
    rules: [
      {
       test: /\.svg/,
       type: 'asset'
     }
    ]
  }