Webpack 通过Vue.js静态目录中的资产循环

我在Vue中创建了一个简单的应用程序（使用Webpack模板），其中包含一个旋转木马。我想做的是循环通过

static/images

中的所有图像来创建旋转木马。我知道这可能是个愚蠢的问题，但我该怎么做呢？我是否需要执行

GET

请求

我问这个问题的原因是因为我要把它交给一个客户机，让它托管在他们的服务器上。如果需要，他们希望能够向旋转木马添加其他图像

---

任何帮助都将不胜感激。

JavaScript无法直接访问文件系统的内容。 您必须使用服务器端脚本（PHP、NodeJs…）传递内容。 然而，若您认为这需要命名的图像是连续的，那个么您可以循环命名并检查图像是否存在

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

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

你可以这样做：

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>

导出默认值{
数据（）{
返回{
imageDir:“/your/path/to/images/”，//您已经从目录结构中知道了这一点
图像：{}
}
},
安装的（）{
this.importAll（require.context（this.imageDir，true，/\.png$/）
},
方法：{
入口（右）{
var imgs={}
r、 keys（）.forEach（key=>（imgs[key]=r（key）））
this.images=imgs
}
}
}

---

我不完全确定我是否做得正确，但它会从目录中返回图像，并按预期显示它们

嗯，我得到了

TypeError:\uuuuuwebpack\urequire\uuuuuu（…）。上下文不是一个函数，在一般情况下是这样的，但是当你使用webpack时，它在创建包时可以访问文件系统——这就是你可以用来解决这个问题的方法。