How to display all images from server directory in a vue javascript app

Question

I'm trying to display all images that exist on a host (server), in one directory (charts) into a vue page instead of having to manually list them all inside of data and therefore having to rebuild with npm every time I want to add an image. The code I have working today is below, any suggestions would be greatly appreciate.

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

1. Expose an API you can hit which returns the list, or 2: Mount the component with the list passed as a property. — Ohgodwhy
– Ohgodwhy, Commented Aug 15, 2019 at 16:49
How could I mount the component with the list passed as a property? — orangeman
– orangeman, Commented Aug 15, 2019 at 17:47
If you have a view that renders this component, e.g.: <my-component>, just pass the data to the view, and pass that to the component <my-component :images="images"></my-component> where the images variable was sent to from the server to the view that renders the component. — Ohgodwhy
– Ohgodwhy, Commented Aug 15, 2019 at 18:54

Jean-Loup · Accepted Answer · 2024-01-10 14:54:12Z

0

You can utilize webpack's require.context() to list files in a given directory at compile time.

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

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

Found in : https://stackoverflow.com/a/58091294/5427882

answered Jan 10, 2024 at 14:54

Jean-Loup

3983 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display all images from server directory in a vue javascript app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related