Acessing filename/url in a directory in JavaScript

Question

I'm trying to build a slideshow something like this.

html:

<div class="wrapper">
</div>

css:

.wrapper {
    background-image: url(dynamic_image_url);
}

dynamic_image_url is a file in a specific directory.

What I want to implement on the js side is randomly access the next image in a directory by clicking a button.

I'm not sure whether it's a backend or frontend work. I found some information related to Node.js, but I'm not sure that's what I need. I have little background knowledge about backend.

Also, I try to build this using Vue (if that matters).

So my main question is: how do I access the filename maybe by looping through a directory?

edit: I won't know the exact filenames of those images because I might add new images in the directory, and I don't want to rename the images or manually add that name in an array or so.

if the file you are trying to access is relative to the directory in which the HTML is hosted, then you can make use of relative paths (i.e: `../../file.png` ) — Ahmad, Nov 15 '18 at 06:48
but I might add some new images in that directory and I don't want to rename the images or manually add image path in my html file — squiiiid, Nov 15 '18 at 06:52
There's no way for you to access these files besides making each file follow some sort of naming pattern that you can iterate with or making an array of image paths/filenames like @Mukyuu said. Otherwise, it's backend code or forget about it. Front-end javascript (i have no nodejs experience) isn't allowed or designed to browse through your file system, that's a major security issue. — Abana Clara, Nov 15 '18 at 06:56
simple way is you define the length/count of how many picture you had in directory etc 10. If you add another 3 then you update to 13. that way you could easily named your file as pic1, pic2..... pic13. That way you could use pic+$length/whatever variable you would named it later. — Mukyuu, Nov 15 '18 at 07:00
this might help you to get started on if you don't want to rename files manually: https://stackoverflow.com/questions/8541180/best-way-to-get-files-from-a-dir-filtered-by-certain-extension-in-php — Mukyuu, Nov 15 '18 at 07:06
It's just a carousel, just make a separate file like `image-path.js` that contains nothing but a variable that has the list of your image paths. Reference that variable on your image slider component and be done with it OP — Abana Clara, Nov 15 '18 at 07:07
This sounds like a problem for the backend since the frontend has zero capabilities in terms of accessing the servers filesystem to retrieve what files are in a folder. The alternative is to set up an array in javascript that has the paths to all the images statically. Annoying since you need to update the array manually, but it's the only way to make it work with only client side code. Otherwise you need e.g. a simple REST API in your server code. — Simon Hyll, Nov 15 '18 at 07:26

Sephyre · Answer 1 · 2018-11-15T08:13:48.677

Here a solution with vue js, i use dummy url for example , but you can list them in array and reference the images from assets directory /assets/images/home.png

Html :

<div id="app">
  <div class="wrapper" :style="wrapper"></div>
  <button @click="previous">Previous</button>
  <button @click="next">Next</button>
</div>

Js with vue :

new Vue({
  el: "#app",
  data: {
    imgs: [
      { path: "https://picsum.photos/200/300" },
      { path: "https://picsum.photos/150/300" },
      { path: "https://picsum.photos/220/300" },
      { path: "https://picsum.photos/310/300" },
    ],
    currentImgIndex: 0
  },
  computed: {
    wrapper () {
        return {
        'background': `url(${this.imgs[this.currentImgIndex].path})`
      }
    }
  },
  methods: {
    next () {
        this.currentImgIndex >= this.imgs.length-1 ? this.currentImgIndex = 0 : this.currentImgIndex++ 
    },
    previous () {
        this.currentImgIndex <= 0 ? this.currentImgIndex = this.imgs.length-1 : this.currentImgIndex-- 
    }
  }
})

css :

.wrapper {
  width: 200px;
  height: 200px;
}

Here a JS fiddle : https://jsfiddle.net/rvqehdkc/

Edit : I haven't seen your edited message, if you dont wanna reference all images then take a look at : Looping through assets in Vue.js static directory

Acessing filename/url in a directory in JavaScript

1 Answers1