我对 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)