使用 Nuxt 动态获取文件夹中的图像路径 [英] Dynamically get image paths in folder with Nuxt
问题描述
我正在使用 nuxt 和 vuetify.我有一个工作轮播组件.我想在静态文件夹中生成一个 .png 文件列表.关注
以下似乎有效:
<v-轮播><v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item></v-轮播><脚本>var 缓存 = {};const images = require.context('../static/', false,/\.png$/);var imagesArray = Array.from(images.keys());var 构造 = [];函数构造项(文件名，构造){fileNames.forEach(fileName => {构造推({'src': 文件名.substr(1)})});返回构造；}var res =constructItems(imagesArray,constructed);控制台日志(res)；导出默认{数据:函数(){返回 {项目:资源};}};I'm using nuxt with vuetify. I have a working carousel component .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js.org/guides/dependency-management/#context-module-api my component looks like:
<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>
I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.
I've found that if I edit the script's items array to look the following it will work:
items: [ { src: '/52iv.png' }, { src: '/91Iv.png' }, ....
How can I adjust my code to get the result I need?
EDIT:
I looked at the proposed solution , but after copying it verbatum I got the following error.
The following appears to work:
<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 = {};
const images = require.context('../static/', false, /\.png$/);
var imagesArray = Array.from(images.keys());
var constructed = [];
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName.substr(1)
})
});
return constructed;
}
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
这篇关于使用 Nuxt 动态获取文件夹中的图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
