我在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.