Looping through assets in Vue.js static directory

Question

I've created a simple app in Vue (using the Webpack template) that has a carousel in it. What I would like to do is loop through all of the images in static/images to create that carousel. I know this is probably a dumb question, but how would I go about doing this? Do I need to perform a GET request?

The reason I'm asking is because I'm going to hand this off to a client to be hosted on their server. They would like to be able to add additional images to the carousel themselves if needed.

Any help would be appreciated.

Devin Norgarb · Accepted Answer · 2018-02-20 05:17:06Z

From this webpack documentation you can get all files in the directory or specific files based on a regex search pattern.

You could do something like:

var cache = {}; function importAll (r) { r.keys().forEach(key => cache[key] = r(key)); } importAll(require.context('../components/', true, /\.js$/));

If you a need an array of image names from the server you could do this:

<template lang="html"> <div style="height: 100px"> <div :key="key" v-for="(img, key) in images" > <img :src="imageDir + key.substr(1)" class="" > </div> </div> </template> <script> export default { data() { return { imageDir: "/your/path/to/images/", // you know this already just from directory structure images: {} } }, mounted() { this.importAll(require.context(this.imageDir, true, /\.png$/)) }, methods: { importAll(r) { var imgs = {} r.keys().forEach(key => (imgs[key] = r(key))) this.images = imgs } } } </script>

I am not entirely sure if I am doing it correctly but it return the images from the directory and displays them as expected.

hmm I'm getting TypeError: __webpack_require__(...).context is not a function

Taha Azzabi · Accepted Answer · 2018-01-13 11:06:53Z

JavaScript can't directly access the contents of a file system. You'll have to pass the contents using a server-side script (PHP,NodeJs…). However, if you would go thought this you need that images named are sequential, then you can loop through names and check if image exist or not.

I think it would be better if you have a service-side when your client can upload images, create an API to list all images, then you performer a get request.

That's true in the general case, but when you're using Webpack, it has access to the file system when it's creating the bundle - and that's what you can use to solve this problem.

Collectives™ on Stack Overflow

Looping through assets in Vue.js static directory

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related