I'm using nuxt with vuetify. I have a working carousel ponent .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following my ponent looks like:

 <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: ".jpg"
  //             },
  //             {
  //               src: ".jpg"
  //             },
  //             {
  //               src: ".jpg"
  //             }
  //           ]
  //         };
  //       }
  //     };
  //
</script>

I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.

I've found that if I edit the script's items array to look the following it will work:

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

How can I adjust my code to get the result I need?

EDIT:

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

I'm using nuxt with vuetify. I have a working carousel ponent .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js/guides/dependency-management/#context-module-api my ponent looks like:

 <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./images/carousel/sky.jpg"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs./images/carousel/bird.jpg"
  //             },
  //             {
  //               src: "https://cdn.vuetifyjs./images/carousel/planet.jpg"
  //             }
  //           ]
  //         };
  //       }
  //     };
  //
</script>

I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.

I've found that if I edit the script's items array to look the following it will work:

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

How can I adjust my code to get the result I need?

EDIT:

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

• javascript
• vue.js
• webpack
• nuxt.js

Share Improve this question Follow edited Jan 8, 2019 at 15:08 user1592380 asked Jan 1, 2019 at 5:41 user1592380user1592380 36.6k105105 gold badges314314 silver badges553553 bronze badges 8

• Does this help? – Alexandre Elshobokshy Commented Jan 3, 2019 at 15:32
• Thank you I tried it verbatim but got the following error - Please see edit – user1592380 Commented Jan 3, 2019 at 21:29
• are you sure your path is correct? what happens if you do '../main/' or '~/main/ instead? in regards to your original code. it looks like your carousel ponent is only one folder deep. – ryeMoss Commented Jan 4, 2019 at 1:01
• @ryeMoss , I've changed the folder to static – user1592380 Commented Jan 4, 2019 at 18:43
• I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method – ryeMoss Commented Jan 4, 2019 at 18:54

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

The following appears to work:

<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
      };
    }
  };