webpack - srcset-loader 创建损坏的文件 (webpack)

Question

我正在尝试用于srcset-loader为项目创建 srcSet 和不同大小的图像。srcset-loader 工作正常并输出以下内容：

{
    "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"
}

我的本地服务器正在运行，localhost:3003所以当我尝试访问时

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

它将图像显示为：

我的 webpack 配置如下加载图像：

{
  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]"
  ]
}

因此，通过 url 访问时，基本上会提供文本/字符串：

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

任何帮助表示赞赏。提前致谢。