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

Question

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

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

任何帮助，将不胜感激。

Answer 1

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

你可以这样做：

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>

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

Answer 2

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

\n\n

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

\n