Thursday, 3 January 2019

Dynamically get image paths in folder with Nuxt

enter image description here

I'm using nuxt with vuetify. I have a working carousel component:

<script>
var images = require.context('../../main/', false, /\.png$/)

console.log('images',images)

// export default {
//   methods: {
//     imgUrl: function (path) {
//       return images('./' + path)
//     }
//   }
// }
export default {
    data () {
    return {
        items: [
        {
            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
        },
        {
            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 main folder and grab the paths to the images , put them in an array and export them to the html template. However when I run:

 var images = require.context('../../main/', false, /\.png$/)

I get :

This relative module was not found: friendly-errors 00:38:32 friendly-errors 00:38:32 * ../../main/ in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/carousel.vue?vue&type=script&lang=js&

How can I get this working?



from Dynamically get image paths in folder with Nuxt

No comments:

Post a Comment