如何在 vue javascript 应用程序中显示服务器目录中的所有图像

Question

我正在尝试将主机（服务器）上的一个目录（图表）中存在的所有图像显示到 vue 页面中，而不是必须手动将它们全部列在数据中，因此每次我想要时都必须使用 npm 重建添加图像。我今天工作的代码如下，任何建议将不胜感激。

<template>
  <div id="app" class="media-display">
    <img class="media-post" v-for="url of images" :key="url" :src="url + '?rnd=' + cacheKey" />
  </div>
</template>

<script>
import DateTime from './lib/DateTime'
import moment from 'moment'

export default {
  el: '#app',
  data() {
    return {
      images: ['/charts/chart1.png', '/charts/chart1.png'],
      cacheKey: +new Date(),
    }
  },
  created() {
    setInterval(() => {
      this.cacheKey = +new Date()
    }, 10000)
  },
  destroyed() {
    clearInterval(this.interval)
  },
}
</script>

Answer 1

您可以利用 webpack 的 require.context() 在编译时列出给定目录中的文件。

https://webpack.js.org/guides/dependency-management/

const illustrations = require.context(
  '@/assets/illustrations',
  true,
  /^.*\.jpg$/
)
console.log(illustrations.keys())

发现于：https://stackoverflow.com/a/58091294/5427882