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访问时，通常会提供text / string：

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

感谢任何帮助。提前谢谢。