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

<template>
  <div>
    <img :src="imageUrl" :key="imageKey" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
      imageKey: 0
    };
  },
  methods: {
    reloadImage() {
      this.imageKey++; // 更新key的值，强制重新渲染组件
    }
  },
  mounted() {
    // 每隔一段时间重新加载图像
    setInterval(this.reloadImage, 5000); // 5000毫秒（5秒）为例
  }
};
</script>

<template>
  <div>
    <img :src="imageUrl" @error="reloadImage" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg'
    };
  },
  methods: {
    reloadImage(event) {
      event.target.src = event.target.src; // 重新加载图像
    }
  }
};
</script>