循环浏览 Vue.js 静态目录中的资产答案

【问题标题】：Looping through assets in Vue.js static directory循环浏览 Vue.js 静态目录中的资产
【发布时间】：2018-06-22 12:16:53
【问题描述】：

我在 Vue 中创建了一个简单的应用程序（使用 Webpack 模板），其中有一个轮播。我想做的是遍历static/images 中的所有图像以创建该轮播。我知道这可能是一个愚蠢的问题，但我该怎么做呢？我需要执行GET 请求吗？

我问的原因是因为我将把它交给客户托管在他们的服务器上。如果需要，他们希望能够自己将其他图像添加到轮播中。

任何帮助将不胜感激。

【问题讨论】：

标签： webpack vue.js get

【解决方案1】：

JavaScript 不能直接访问文件系统的内容。您必须使用服务器端脚本（PHP、NodeJs ...）传递内容。但是，如果您认为您需要命名的图像是连续的，那么您可以遍历名称并检查图像是否存在。

我认为如果你有一个服务端会更好，当你的客户端可以上传图片，创建一个 API 来列出所有图片，然后你执行一个 get 请求。

【讨论】：

这在一般情况下是正确的，但是当您使用 Webpack 时，它可以在创建包时访问文件系统 - 这就是您可以用来解决此问题的方法。

【解决方案2】：

从此webpack documentation，您可以获取目录中的所有文件或基于正则表达式搜索模式的特定文件。

你可以这样做：

var cache = {};

function importAll (r) {
  r.keys().forEach(key => cache[key] = r(key));
}

importAll(require.context('../components/', true, /\.js$/));

如果您需要来自服务器的图像名称数组，您可以这样做：

<template lang="html">
   <div style="height: 100px">
     <div :key="key" v-for="(img, key) in images" >
       <img :src="imageDir + key.substr(1)" class="" >
     </div>
    </div>
 </template>
<script>
export default {
  data() {
    return {
      imageDir: "/your/path/to/images/", // you know this already just from directory structure
      images: {}
    }
  },

  mounted() {
    this.importAll(require.context(this.imageDir, true, /\.png$/))
  },
  methods: {
    importAll(r) {
      var imgs = {}
      r.keys().forEach(key => (imgs[key] = r(key)))
      this.images = imgs
    }
  }
}
</script>

我不完全确定我是否正确执行此操作，但它会从目录返回图像并按预期显示它们。

【讨论】：

嗯，我收到了TypeError: __webpack_require__(...).context is not a function