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

【问题标题】：Dynamically get image paths in folder with Nuxt使用 Nuxt 动态获取文件夹中的图像路径
【发布时间】：2019-05-28 07:53:13
【问题描述】：

我将 nuxt 与 vuetify 一起使用。我有一个工作轮播组件。我想在静态文件夹中生成 .png 文件的列表。关注Dynamically import images from a directory using 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' }, ....

如何调整我的代码以获得我需要的结果？

编辑：

我查看了建议的解决方案，但在逐字复制后出现以下错误。

【问题讨论】：

this 有帮助吗？
谢谢我逐字尝试，但出现以下错误 - 请参阅编辑
您确定您的路径正确吗？如果你改为使用'../main/' 或'~/main/ 会发生什么？关于您的原始代码。看起来您的轮播组件只有一个文件夹深。
@ryeMoss ，我已将文件夹更改为静态
我相信我能够使用 require.context() 和 /main/ 中的文件让它工作。我想它在 /static/.不幸的是，我也不太熟悉 webpack 来帮助你的新方法

标签： javascript vue.js webpack nuxt.js

【解决方案1】：

以下似乎有效：

<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 = {};
  const images = require.context('../static/', false, /\.png$/);
  var imagesArray = Array.from(images.keys());
  var constructed = [];
  function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
      constructed.push({
        'src': fileName.substr(1)
      })
    });
    return constructed;
  }
  var res = constructItems(imagesArray, constructed);
  console.log(res);
  export default {
    data: function() {
      return {
        items: res
      };
    }
  };

【讨论】：