Images and fonts not loaded as encoded data uri after webpack 5 publish

Question

I am updating my webpack in an angular project to webpack 5 and i am using assets/inline for images, after i publish the application in local and inspect the img src tag i see '../.../../image.png' instead of datauri. My web pack config looks something like below.

       rules[
            {
                test: /\.html$/, type: 'asset/resource'
            },
            { test: /\.css$/, use: [{ loader: 'to-string-loader' }, isDevBuild ? { loader: 'css-loader' } : { loader: 'css-loader?minimize' } ] },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                type: 'asset/inline'
            }]

When i run the app i see none of the images are NOT loading as data uri in my html files being served to the browser. It looks something like this.

 <img _ngcontent-arh-c99="" src="url(../../../../../images/logo.png)" class="block-pay-logo img img-responsive">

I would want to see base64 encoded data uri in the src tags, I am using webpack 5.5.0 I tried specifying the data url limit as well, none of the images or fonts that are as small as 1KB are loading as data uri in my html page in the browser.