在 JavaScript 中访问目录中的文件名/url答案

【问题标题】：Acessing filename/url in a directory in JavaScript在 JavaScript 中访问目录中的文件名/url
【发布时间】：2018-11-15 06:44:28
【问题描述】：

我正在尝试制作类似这样的幻灯片。

html:

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

css:

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

dynamic_image_url 是特定目录中的文件。

我想在js端实现的是通过点击按钮随机访问目录中的下一张图片。

我不确定它是后端工作还是前端工作。我找到了一些与 Node.js 相关的信息，但我不确定这是否是我需要的。我对后端的背景知识知之甚少。

另外，我尝试使用 Vue 来构建它（如果这很重要的话）。

所以我的主要问题是：如何通过循环访问目录来访问文件名？

编辑：我不知道这些图像的确切文件名，因为我可能会在目录中添加新图像，并且我不想重命名图像或在数组中手动添加该名称。

【问题讨论】：

你去制作一个图片路径数组怎么样？
如果您尝试访问的文件是相对于托管 HTML 的目录，那么您可以使用相对路径（即：../../file.png）
除了让每个文件遵循某种可以迭代的命名模式或像@Mukyuu 所说的那样制作一组图像路径/文件名之外，您无法访问这些文件。否则，它是后端代码或忘记它。不允许或设计前端 javascript（我没有 nodejs 经验）来浏览您的文件系统，这是一个主要的安全问题。
简单的方法是你定义你在目录中有多少张图片的长度/计数等 10。如果你添加另外 3 个然后你更新到 13。这样你可以很容易地将你的文件命名为 pic1，图 2 ..... 图 13。这样你就可以使用 pic+$length/你以后命名的任何变量。
@Mukyuu 或者直接跑到 404

标签： javascript html

【解决方案1】：

这里是 vue js 的解决方案，例如，我使用虚拟 url，但您可以将它们列在数组中并引用资产目录中的图像 /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>

带有 vue 的 Js：

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;
}

这里有一个 JS 小提琴：https://jsfiddle.net/rvqehdkc/

编辑：我还没有看到您编辑的消息，如果您不想参考所有图像，请查看：Looping through assets in Vue.js static directory

【讨论】：