如何通过Vue实现图片的加载进度显示？

<template>  <div>    @@##@@    <div v-if="total !== 0">      图片加载进度：{{ (loadCount / total * 100).toFixed(2) }}%    </div>  </div></template><script>export default {  data() {    return {      imageSources: [        // 图片地址列表        // 可以根据需要添加和修改图片地址      ],      total: 0, // 总图片数量      loadCount: 0, // 已加载的图片数量    };  },  computed: {    progress() {      if (this.total === 0) {        return 0;      }      return this.loadCount / this.total * 100;    },  },  methods: {    onLoad(index) {      this.loadCount++;      if (this.loadCount === this.total) {        console.log('所有图片加载完成');      }    },    onError(index) {      console.error(`第${index + 1}张图片加载失败`);    },  },  mounted() {    this.total = this.imageSources.length;  },};</script>

<template>  <div>    <ImageProgress></ImageProgress>    <!-- 添加需要加载的图片地址 -->    <!-- <ImageProgress :imageSources="imageSources"></ImageProgress> -->  </div></template><script>import ImageProgress from './ImageProgress.vue'; // 引入ImageProgress组件export default {  components: {    ImageProgress,  },  data() {    return {      // 图片地址列表      imageSources: [        '图片地址1',        '图片地址2',        '图片地址3',        // ...      ],    };  },};</script>