如何使用后端的字符串Vue数据来展示图片？

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

<script>
export default {
  data() {
    return {
      imageUrl: '' // 后端返回的图片URL地址
    };
  },
  mounted() {
    // 后端获取图片URL地址的逻辑，可以使用Ajax、Fetch等方式获取数据
    // 假设获取到的URL地址为imageUrl
    this.imageUrl = '后端返回的图片URL地址';
  }
};
</script>

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

<script>
export default {
  data() {
    return {
      imageUrl: '' // 后端返回的Base64编码的图片数据
    };
  },
  mounted() {
    // 后端获取Base64编码的图片数据的逻辑，可以使用Ajax、Fetch等方式获取数据
    // 假设获取到的Base64编码为imageBase64
    const imageBlob = this.base64ToBlob('后端返回的Base64编码的图片数据');
    this.imageUrl = URL.createObjectURL(imageBlob);
  },
  methods: {
    base64ToBlob(base64) {
      const byteCharacters = atob(base64);
      const byteArrays = [];

      for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
        const slice = byteCharacters.slice(offset, offset + 1024);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
      }

      return new Blob(byteArrays, { type: 'image/jpeg' });
    }
  }
};
</script>