dynamic images from a folder

app.vue

<template>
  <div v-for="(image, index) in images" :key="index">
    <img :src='image' alt="image">
  </div>
</template>

<script>
const { images } = process.env;
export default {
data() {
    return {
      images 
      }
   }
}
</script>

nuxt.config.js

const imagesFolder = "./static/images/";
const fs = require("fs");
const images = [];

fs.readdir(imagesFolder, (err, files) => {
  files.forEach(file => {
    images.push(`images/${file}`);
  });
});

module.exports = {

env: {
    images
  }
}

Nice! Could use the filename as a caption ❤️

Totally! @developius, you could even go further and add a description.
const [title, description] ="Title Of the Image.Some description ofimage.jpg".split(".", 2)

kind of hacky, but would just wrap in try / catch in case an image didn't follow the right naming format.

@gregbenner I don't think you'd even need a try/catch:

> const [title, description] = "Title Of the Image".split(".", 2)
> title
"title Of the image"
> description
undefined