我在vuetify中使用nuxt.我有一个 carousel 组件.我想生成一个列表.静态文件夹中的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数组以查看以下内容,它将起作用:
项目:[
如何调整代码以获得所需的结果?
编辑:
我查看了提议的解决方案,但在逐字复制之后,我得到了以下错误.