Unable to serve images to the browser using webpack

Question

I am facing an issue with my webpack configuration where I am unable to serve images to the browser. I have defined the following webpack rules to handle different file types:

rules = [
    // Rule for Sass/SCSS files
    {
        test: /\.scss$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: {
                    sourceMap: true,
                    url: false,
                }
            },
            {
                loader: 'resolve-url-loader',
                options: {
                    sourceMap: true,
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                }
            }
        ]
    },
    // Rule for XSLT files
    {
        test: /\.xslt$/,
        use: 'raw-loader',
    },
    // Rule for XML files
    {
        test: /\.xml$/,
        use: 'raw-loader',
    },
    // Rule for image files
    {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
    }
];

Despite configuring webpack to handle image files using 'asset/resource', when I run my application, the browser returns a 404 error for the image files, stating "Failed to load resource".

"webpack": "~5.50.0"

Can someone help me understand why my webpack configuration is failing to serve image files to the browser? Any insights or suggestions would be greatly appreciated. Thank you!

I have tried using loaders such as file-loader and url-loader in my webpack configuration previously. However, I believe they may not be suitable for my current use case.