Vue3中如何处理Base64图片加载失败的情况？

在Vue3中，处理Base64图片加载失败的情况通常会使用`v-if`或`v-loading`指令以及`axios`或`fetch`等网络请求库来异步加载图片，并在加载失败时提供备用方案。下面是一个简单的示例：

<template>
  <div>
    <img :src="loading ? '/default-avatar.png' : base64Image" alt="验证码" v-if="imageLoaded">
    <span v-else>Loading...</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      base64Image: '',
      imageLoaded: false,
    };
  },
  created() {
    this.loadImage();
  },
  methods: {
    loadImage() {
      axios.get('/api/captcha', { responseType: 'blob' })
        .then(response => {
          this.base64Image = URL.createObjectURL(new Blob([response.data], { type: 'image/png' }));
          this.imageLoaded = true;
          this.loading = false;
        })
        .catch(() => {
          this.base64Image = '/default-avatar.png'; // 图片加载失败时的默认图
          this.imageLoaded = true; // 设定加载完成，以便于隐藏加载提示
          this.loading = false;
        });
    },
  },
};
</script>

在这个例子中，当图片加载成功时，`imageLoaded`会被设为`true`，显示实际的Base64图片；如果加载失败，则使用默认的占位图，并显示“Loading…”直到图片成功加载。