image - 在 pug + webpack 中动态加载所需的图像

Question

我有一个用于审查块的哈巴狗混合。添加评论，我传递了我想用作个人资料头像的图像，因此我需要即时加载它。让我们将代码简化为仅加载图像。

mixin image({src=""} = {})
  .image
    - var imageSRC = "./images/" + src + ".jpg";
    img(src=require(imageSRC))

问题是我必须在 require 函数中使用相对路径，因为 mixin 不能在单页上使用。

我已经阅读了 pug 文档，所以我知道 wepback 存在问题，因为它在捆绑dist文件夹中搜索（所有项目都在其中捆绑）。所以我必须在 webpack 配置中设置一些东西。目前我只是使用 pug-loader 加载哈巴狗。

module: {
  rules: [
  ...
  {
    test: /\.pug$/,
    loader: "pug-loader"
  }
  ...
  ]
}

我想有一些插件或额外的选项，但我还没有找到。对我来说完美的结果是获得 base64 格式的图像。