我有一个Vue轮播组件,我想在静态文件夹中生成.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>
// https://stackoverflow.com/questions/2727167/how-do-you-get-a-list-of-the-names-of-all-files-present-in-a-directory-in-node-j
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>
注释掉的部分可以加载轮播图片,因此我需要生成一个看起来像项目的对象。我意识到我还没有,但是当我运行开发服务器时,我看到了:
[Function: webpackContext] {
20:20:42
keys: [Function: webpackContextKeys],
resolve: [Function: webpackContextResolve],
id: './static sync \\.png$'
}
这是什么意思?如何使用webpack require.context()函数测试路径是否正确?