如何在"vue product zoomer“nuxt ssr中修复卸载的图像

<template>
  <div>
    <div v-if="imageLoaded">
      <img :src="imageSrc" alt="Product Image">
    </div>
    <div v-else>
      Loading image...
    </div>
  </div>
</template>

export default {
  data() {
    return {
      imageSrc: null,
      imageLoaded: false
    };
  },
  methods: {
    loadImage() {
      const img = new Image();
      img.src = "图像URL";
      img.onload = () => {
        this.imageSrc = img.src;
        this.imageLoaded = true;
      };
      img.onerror = () => {
        this.imageLoaded = false;
      };
    }
  },
  created() {
    this.loadImage();
  },
  beforeDestroy() {
    // 在组件销毁前，将图像卸载，避免内存泄漏
    this.imageSrc = null;
  }
};