如何在Vue组件中实现图片自动重新加载

Question

如何在Vue组件中实现图片自动重新加载

3

我对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: 0;
  background: #FFF;
  position: relative;
  cursor: pointer;
}
.media-post img {
  //border-radius: 1vmin;
  display: block;
  max-width: 100%;
  height: auto;
}
.media-post figcaption {
  color: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  padding: 1rem 1.5rem;
  z-index: 2;
  font-size: 2rem;
  text-shadow: 0 1px 2px #000;
}
</style>

- orangeman

每次更新后，图片的源路径会不会有所不同？ - fh0592x

你介意给我展示一下它的样子吗？我尝试使用setInterval()，但也无法使其工作。 - orangeman

由于评论中不允许使用代码块，所以我必须将其作为答案发布。请参见下方内容。 - fh0592x

现在我确实看到开发者控制台中似乎有一种重新加载的情况，我可以看到元素部分中的“figure”部分每隔10秒闪烁一次。然而图片还是一样的。我在数据中给我的图片名称添加了“?rnd='+Math.random()”，以查看它们的名称是否被更新，只是Chrome缓存了这些图片，但是图片的名称并没有改变。我需要让Vue强制重新渲染数据吗？ - orangeman

为了消除缓存问题，请使用私密或无痕窗口（对于Chrome，按下Ctrl + Shift + N）。在data中的属性在设计上保持不变，除非它们在created或mounted钩子期间通过方法更改或分配新值。 - fh0592x

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Decade Moon · Accepted Answer

您只需要定期重新生成随机数后缀。未经过测试：

<img
  v-for="url of images"
  :key="url"
  :src="url + '?rnd=' + cacheKey"
/>

data() {
  return {
    images: [
      '/charts/chart1.png',
      '/charts/chart2.png',
      '/charts/chart3.png',
    ],
    cacheKey: +new Date(),
  };
},

created() {
  this.interval = setInterval(() => {
    this.cacheKey = +new Date();
  }, 60 * 1000);
},

destroyed() {
  clearInterval(this.interval);
},

如果不清楚的话，+new Date() 返回的是自1970年1月1日00:00:00 UTC以来的秒数(文档)。