Error 404 al obtener imagen con webpack

Estoy siguiendo este enlace para agregar imágenes a mi paquete:

https://webpack.js.org/guides/asset-management/

Tengo la siguiente estructura de archivos en mi carpeta raíz:

index.html

index.js

carpeta de imágenes (con archivos SVG)

Este es mi webpack.config.js

// Generado usando webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';
const HtmlWebpackPlugin = require("html-webpack-plugin");

const stylesHandler = 'style-loader';



const config = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    devServer: {
        open: true,
        historyApiFallback: true,
        host: 'localhost'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Plantilla personalizada',
            // Carga una plantilla personalizada (lodash por defecto)
            template: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'images',
            },
        ]
    }
};


module.exports = () => {
    if (isProduction) {
        config.mode = "production";
    } else {
        config.mode = "development";
    }
    return config;
};

Estoy utilizando los siguientes módulos de Webpack:

“webpack”: “^5.64.4”,
“webpack-cli”: “^4.9.1”,
“webpack-dev-server”: “^4.6.0”,
“wepack-cli”: “0.0.1-security”

En mi archivo js, estoy intentando agregar una imagen a un elemento SVG haciendo lo siguiente:

.attr('xlink:href', 'images/virtual-machine.svg')

Pero obtengo un error 404.