https://i.sstatic.net/3FKZH.png
Incorporating nuxt with vuetify, I have successfully implemented a carousel component. Now, my goal is to generate a list of the .png files located in the static folder. By referencing a tutorial on dynamically importing images from a directory using webpack and exploring the Webpack context module API guide, my current component setup appears as follows:
<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
};
}
};
</script>
The objective here is to navigate through the static folder, extract image paths, store them in an array, and then output them to the HTML template.
Upon modifying the script's items array as demonstrated below, the solution proved effective:
items: [ { src: '/52iv.png' }, { src: '/91Iv.png' }, ....
To achieve the desired outcome, how can I tailor my code accordingly?
EDIT:
After considering the suggested solution and replicating it word for word, I encountered the following error.