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

问题描述

我正在尝试创建一个带有作为道具的vuejs SFC 组件（名为Gallery.vue），它应该接受保存所有图像文件的图像目录的字符串路径。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, false, /\.(png|jpe?g|svg)$/)     // DOESNT WORK
    );
    console.log(this.images);
  },
  methods: {
    importAll(r) {
      return r.keys().map(r);
    },
  },
};
</script>

在内容文件中用作<Gallery loc="./page1/assets/" />或<Gallery :loc="location" />

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

这个问题的替代动态解决方案可能是什么？

标签： javascriptvue.jswebpackvuejs2components

用法：

对于字符串常量

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

有变量

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

让我知道这是否是修复

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

问题描述

解决方案

推荐阅读