I'm attempting to automatically import all images from a folder. Here is what I've tried under // tested:
<template>
<p>classical art</p>
<img v-for="image in images" :key="image" :src="image.url" :alt="image.alt" />
</template>
<script>
export default {
data: function () {
return {
name: "classical-art",
images: [
{ url: require("../assets/images/classical-art/img-00001.jpg"), alt: "první" },
{ url: require("../assets/images/classical-art/img-00002.jpg"), alt: "druhý" },
],
};
},
};
// tested
const classicalArt = require(`../assets/images/classical-art/.jpg`)
classicalArt.forEach((image) => {
return image;
});
</script>
<style module lang="scss"></style>
I'm not very familiar with these things, so I'll need some help with this. Maybe I'm just confused, but I can't seem to get it to work. If possible, I would like it to be asynchronous (lazy-loading) or something similar.
----- UPDATE:
I attempted something like this, but still no luck. With require.context, I should be able to accomplish this:
<template>
<p>classical art</p>
<img :src="getImgUrl()" v-bind:alt="req" />
</template>
<script>
export default {
data: function () {
return {
name: "classical-art",
};
},
methods: {
getImgUrl() {
var req = require.context(
"../assets/images/classical-art/",
false,
/\*.jpg$/
);
req.keys().forEach(function (key) {
req(key);
});
},
},
};
</script>
<style module lang="scss"></style>
I'd like for when I add another image to the classical-art folder, a new <img> tag is created automatically and displays the image without needing to manually update the code.
Could anyone assist me with this?