如何使用 vue-gallery 从文件夹加载图像？

Question

我正在尝试使用 vue-gallery 创建一个图库，但我不确定如何从文件夹加载图像。 还应该注意，我使用的是 nuxt.js 框架。

我尝试过一张一张地添加图片，但这是非常规的，因为我希望能够将图片上传到该文件夹​​，而不必担心必须将图片添加到数组中。我知道 node.js，但我不确定如何在没有 fs 的情况下获取文件夹中的文件。

我正在使用安装了 vue 和 vue-gallery 的 nuxt.js。

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div
      class="image"
      v-for="(image, imageIndex) in images"
      :key="imageIndex"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
    ></div>
  </div>
</template>

<script>
  import VueGallery from 'vue-gallery';

  export default {
    data: function () {
      return {
        images: [
          'https://dummyimage.com/800/ffffff/000000',
          'https://dummyimage.com/1600/ffffff/000000',
          'https://dummyimage.com/1280/000000/ffffff',
          'https://dummyimage.com/400/000000/ffffff',
        ],
        index: null
      };
    },

    components: {
      'gallery': VueGallery
    },
  }
</script> 

<style scoped>
  .image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;
  }
</style>

这是我正在使用的，它显示那些虚拟图像。我不确定如何从文件夹中读取并将它们添加到 vue-gallery 所需的 images 数组中。

预期结果：vue-gallery 正确显示文件夹中的图像。 没有错误，只是我不知道该怎么做。哈哈

Answer 1

我刚刚使用它来工作

Click Me