vue3+typescript如何将base64转为图片

在 Vue 3 中使用 TypeScript，可以通过在组件中定义一个方法来将 base64 转为图片。同时，可以使用 `ref` 来获取 `img` 标签的 DOM 对象，并将其赋值给 `src` 属性。

以下是 TypeScript 示例代码：

<template>
  <div>
    <img ref="image" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const image = ref<HTMLImageElement | null>(null);

    function base64ToImage(base64: string): void {
      const binaryStr = atob(base64);
      const len = binaryStr.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
      }
      const imageBlob = new Blob([bytes], { type: 'image/jpeg' });
      const imageUrl = URL.createObjectURL(imageBlob);
      image.value!.src = imageUrl;
    }

    // 在 mounted 钩子中调用 base64ToImage 方法
    // 以下示例中 base64Str 是一个 base64 编码的图片字符串
    import { onMounted } from 'vue';
    onMounted(() => {
      const base64Str = 'data:image/jpeg;base64,/9j/4AAQSkZJRgA...';
      base64ToImage(base64Str);
    });

    return {
      image
    };
  }
});
</script>

在上面的代码中，使用了 `ref` 来获取 `img` 标签的 DOM 对象，并将其赋值给 `image` 变量。然后在 `base64ToImage` 方法中，将 base64 编码解码为二进制数据，再将其转化为 Blob 对象，最后用 URL.createObjectURL() 方法创建一个 URL，将其赋值给 `img` 标签的 `src` 属性。

在 `mounted` 钩子中调用 `base64ToImage` 方法，将 base64 编码的图片字符串作为参数传递给它即可。请注意，这里的 `base64Str` 只是一个示例，实际使用时应该替换为真实的 base64 字符串。