使用Nuxt动态获取文件夹中的图像路径

JavaScript Vue.js

LGil

2020-03-23

在此处输入图片说明

我在vuetify中使用nuxt。我有一个可运行的轮播组件。我想在静态文件夹中生成.png文件列表。以下使用的WebPack从目录动态导入图像及以下https://webpack.js.org/guides/dependency-management/#context-module-api喜欢我的长相成分:

 <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


<script>

  var cache = {};
  function importAll(r) {
    r.keys().forEach(key => cache[key] = r(key));
  }
  var getImagePaths = importAll(require.context('../static/', false, /\.png$/));
  // At build-time cache will be populated with all required modules. 
  export default {
    data: function() {
      return {
        items: getImagePaths
      };
    }
  };
  //     export default {
  //       data() {
  //         return {
  //           items: [{
  //               src: "/52lv.PNG"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
  //             }
  //           ]
  //         };
  //       }
  //     };
  //
</script>

我想搜索静态文件夹并获取图像的路径,将它们放置在数组中并将其导出到html模板。

我发现,如果我编辑脚本的items数组以查看以下内容,它将起作用:

项目:[{src:'/52iv.png'},{src:'/91Iv.png'},....

如何调整代码以获得所需的结果?

编辑:

I looked at the proposed solution , but after copying it verbatum I got the following error.

在此处输入图片说明

第2707篇《使用Nuxt动态获取文件夹中的图像路径》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android