我正在尝试使用Vue-Gallery制作一个画廊,但是我不确定如何从文件夹中加载图像。还应注意,我正在使用NUXT.JS框架。
我尝试过一个一个添加图像,但这是非常规的,因为我希望能够将图像上传到该文件夹,而不必担心必须将图像添加到数组中。我知道node.js,但我不确定如何在没有fs的文件夹中获取文件。
我正在使用安装Vue和Vue-Gallery的Nuxt.js。
<template>
<div>
<gallery :images="images" :index="index" @close="index = null"></gallery>
<div
class="image"
v-for="(image, imageIndex) in images"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</div>
</template>
<script>
import VueGallery from 'vue-gallery';
export default {
data: function () {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null
};
},
components: {
'gallery': VueGallery
},
}
</script>
<style scoped>
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #ebebeb;
margin: 5px;
}
</style>
这是我正在使用的,它显示了那些虚拟图像。我不确定如何从文件夹中读取并将它们添加到Vue-Gallery所需的images
数组中。
预期结果:Vue-Gallery从文件夹中正确显示图像。没有错误,只是我不知道该怎么办。大声笑
我刚刚使用此
来工作单击我