小编ora*_*man的帖子

如何让图像在 vue 组件中自动重新加载

我对 Vue 很陌生,我有一个运行着几个不同页面的应用程序。我试图拥有的页面之一是显示在我的主机上的目录中找到的所有图像,并在图像更改时自动重新加载它们(单独的应用程序每 10 秒更新一次这些图像)。我已经能够显示所有图像(虽然只是通过列出它们),但我似乎无法弄清楚如何让图片自动刷新。以下是代码,非常感谢任何帮助。

<template>
  <div id="app" class="media-display">
    <figure class="media-post" v-for="(image, index) in images" v-bind:key="image.id" >
      <img :key="index" :src="getImage(index)" v-bind:alt="image" width="580" height="390" v-bind:key="index" />
    </figure>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  el: '#app',
  data(){
    return {
      images: [
        '/charts/chart1.png?rnd='+Math.random(),
        '/charts/chart2.png?rnd='+Math.random(),
        '/charts/chart3.png?rnd='+Math.random(),
      ],
      id : 1,
    }
  },
  methods: {
    getImage(index) {
      return this.images[index]
    }
  }
}
</script>

<style>
.media-post {
  display: inline-block;
  padding: 1vmin;
  //border-radius: 2vmin;
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
  margin: …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-component vuetify.js

0
推荐指数
1
解决办法
3405
查看次数

标签 统计

vue-component ×1

vue.js ×1

vuetify.js ×1