Vue新手求助：如何在组件中实现图片自动重新加载？

Hey there! Let's get your image auto-refresh working smoothly. The core issue right now is that your random rnd parameter is only generated once when the component initializes. Even if the actual image files are updated by another app, the browser sees the same URL and uses its cached version instead of reloading the fresh image.

Here's how to fix this step by step:

1. Add a Timer to Refresh Image URLs #

We'll use setInterval in the mounted hook to update the image URLs every 10 seconds. Each time, we'll append a new random value to bust the browser cache, forcing it to fetch the latest image file.

2. Clean Up the Timer on Component Destroy #

Always clear the interval when the component is destroyed to avoid memory leaks—this is a best practice for Vue components.

3. Fix Duplicate key Attributes #

Your <img> tag had duplicate v-bind:key directives, which is unnecessary. We'll remove the redundant one to keep the template valid.

Modified Full Code #

<template>
  <div id="app" class="media-display">
    <figure class="media-post" v-for="(image, index) in images" :key="index">
      <img :src="image" :alt="`Chart ${index + 1}`" width="580" height="390" />
    </figure>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  el: '#app',
  data() {
    return {
      baseImages: ['/charts/chart1.png', '/charts/chart2.png', '/charts/chart3.png'],
      images: [],
      refreshInterval: null
    }
  },
  mounted() {
    // Initialize images with cache-busting params on first load
    this.refreshImages()
    // Set up 10-second auto-refresh interval
    this.refreshInterval = setInterval(() => {
      this.refreshImages()
    }, 10000)
  },
  beforeUnmount() {
    // Clear the interval when component is removed to prevent memory leaks
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval)
    }
  },
  methods: {
    refreshImages() {
      // Generate new URLs with fresh random values to bypass browser cache
      this.images = this.baseImages.map(img => `${img}?rnd=${Math.random()}`)
    }
  }
}
</script>

<style>
.media-post {
  display: inline-block;
  padding: 1vmin;
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
  margin: 0;
  background: #FFF;
  position: relative;
  cursor: pointer;
}

.media-post img {
  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>

Key Changes Explained: #

• Split image paths into baseImages (static, unchanging paths) and images (dynamic URLs with cache-busting params) to keep logic clean.
• The refreshImages method regenerates URLs with a new Math.random() value each time—this tricks the browser into thinking it's a new resource, so it downloads the latest image file.
• The mounted hook initializes images on first load and starts the 10-second refresh cycle.
• beforeUnmount clears the interval to stop background activity once the component is no longer in use.
• Simplified the :alt text and removed duplicate key attributes for cleaner, valid template code.

This setup will ensure your page automatically pulls the latest images every 10 seconds, just like you need!

内容的提问来源于stack exchange，提问作者orangeman