srcset-loader creating broken files (webpack)

Question

I am trying to use srcset-loader for creating srcSet and different size images for a project. The srcset-loader is working fine and outputs the following:

{
    "sources": {
        "100w": "/public/build/images/2322f015aeeee277d059fe0263f57559.png",
        "200w": "/public/build/images/bd13c599640b8bf64e9b9fd0a75aa6ef.png"
    },
    "srcSet": "/public/build/images/2322f015aeeee277d059fe0263f57559.png 100w,/public/build/images/bd13c599640b8bf64e9b9fd0a75aa6ef.png 200w"
}

My local server is running on localhost:3003 so when I try to access

localhost:3003/public/build/images/2322f015aeeee277d059fe0263f57559.png

It shows an image as:

My webpack config is as follows to load the images:

{
  test: /\.(jpe?g|png|gif|svg|webp)$/i,
  // match one of the loader's main parameters (sizes and placeholder)
  resourceQuery: /[?&](sizes|placeholder)(=|&|\[|$)/,
  use: [
    "srcset-loader",
    "file-loader?outputPath=images/&name=[hash].[ext]"
  ]
},
{
  test: /\.(jpe?g|png|gif|svg|webp)$/i,
  // match one of the loader's main parameters (sizes and placeholder)
  use: [
    "file-loader?outputPath=images/&name=[hash].[ext]"
  ]
}

So basically text/string is served when accessed via url:

module.exports = __webpack_public_path__ + "images/654e6b8201639fdb1e9c2508b226a960.png";

Any help is appreciated. Thanks in advance.