如何从作为道具提供的目录路径中的所有图像文件加载到vuejs组件？

如何解决如何从作为道具提供的目录路径中的所有图像文件加载到vuejs组件？

我正在尝试创建一个Gallery.vue作为道具的vuejs SFC组件（命名为location），该组件应接受存放所有图像文件的图像目录的字符串路径。

我期待使用webpack加载所有图像文件，以便以后可以压缩和优化图像。

到目前为止，我已经完成了此设置，该设置仅适用于经编码的路径，但是当我尝试将值从变量传递给它时会引发异常（下面将提到确切的错误）。

组件文件 Gallery.vue

// templated ... skipped
...
<script>
export default {
  props: {
    loc: {
      type: String,default: "assets",},data: () => ({
    images: "",}),mounted() {
    console.log("IMAGE LOC: " + this.loc);
    this.images = this.importAll(
      // require.context("../../assets",false,/\.(png|jpe?g|svg)$/)   // WORKS
      /**
       * FIXME Error in mounted hook:
       * "TypeError: __webpack_require__(...).context is not a function"
       */
      require.context(this.loc,/\.(png|jpe?g|svg)$/)     // DOESNT WORK
    );
    console.log(this.images);
  },methods: {
    importAll(r) {
      return r.keys().map(r);
    },};
</script>

在Content文件中以<Gallery loc="./page1/assets/" />或<Gallery :loc="location" />的形式使用

如何使路径可变，并将其作为道具传递给组件，以便Webpack仍可以读取并稍后转换该位置的所有图像？

该问题的替代动态解决方案是什么？

解决方法

用法：

• 用于字符串常量

<Gallery loc="./page1/assets/" />

• 带有变量

// in the data section
const location = './page1/assets/'
// in the template section
<Gallery :loc="location" />

让我知道是否可以解决