
У меня есть компонент vue carousel, и я хочу создать список файлов .png в статической папке. После Динамический импорт изображений из каталога с помощью веб-пакета и После 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>
// /1651513/kak-poluchit-spisok-imen-vseh-failov-prisutstvuyschih-v-kataloge-v-node-js
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 ()?