Question

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

我之所以提出这个问题的原因是因为我要将其交给客户端托管在他们的服务器上。如果需要，他们希望能够在旋转木马上添加额外的图像。

任何帮助都将不胜感激。

Answer 1

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

我认为，当您的客户端可以上传图像，创建API以列出所有图像，然后执行获取请求时，如果您有服务端会更好。

Answer 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>

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

循环遍历Vue.js静态目录中的资产

2 个答案: