javascript - 使用Vue App中的动态目录的Webpack require.context()解决方法

我有一个Vue应用程序，它包含具有多个图像库的路线。用户可以单击这些画廊之一，以进入动态组件，该组件将显示属于他们正在查看的特定画廊的图像。
例如，用户看到2张卡，foo和bar。单击它们会将用户带到/gallery/foo或/gallery/bar。我的 Assets 文件夹是这样组织的

src/assets/images
├── foo
│   └── 1.jpg
└── bar
    └── 2.jpg

因此，每个图库都有一个对应的文件夹，其中包含所有图像。我在这里无法访问任何类型的数据库或API，该项目基本上是一个静态网站，调用任何类型的外部资源均不在此项目范围内。
我在这里尝试使用Webpack的require.context()，但是它不能像我想做的那样与动态路径一起使用，就像在Webpack Issue #4772中可以看到的那样。
我尝试过的相关代码

data() {
  return {
    images: null
  }
),
mounted() {
    this.populatePage();
  }
},
methods: {
  populatePage() {
    const imagePath = `@/assets/images/${this.$route.params.id}/`;
    this.images = this.importAll(require.context(imagePath, true, /\.(jpe?g)$/));
  },
  importAll(r) {
     return r.keys().map(r);
  }
}

由于我在imagePath中使用了require.context()，因此这显然不如Github问题中所示。如果我只是做@/assets/images/，它可以正常工作，但是问题是它将导入images目录中的每个jpg，这显然不是我想要的。
在这里获得所需效果的最佳方法是什么？最好是，我希望避免加载不属于用户所在页面的任何图像，因为可能有数百个图像，即使它们已尽可能优化，但它们仍然可能很大(每个〜150kb，因为它们必须具有很高的分辨率)
最初，我尝试做一些变体，即仅导入所有内容，然后也许从webpack生成的块中重新命名文件夹名称，但是webpack会省略目录并在文件名的末尾添加一个不同的哈希。是否有办法使Webpack在Vue中将目录附加到文件名中，或者实际上是将其附加到文件名中？

/img/1.2f159e72.jpg
/img/2.2c1da0da.jpg

最佳答案

Webpack是高度可配置的。您可以对其进行设置以保留目录结构-请参见file-loader documentationwebpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
};

然后，您可以轻松地使用原始方法导入整个根目录(带有库目录)，并仅过滤所需库中的文件。不要害怕导入所有内容-file-loader不会通过网络“加载”文件，它只是返回文件的URL(在构建过程中)。为了将文件加载到浏览器，您需要在img标记内使用它(例如)