vue3调用后端接口渲染图片使用vue3调用后端图片api，渲染到img图片标签上，案例使用的是otp二维码案例实现的一

话不多说，直接上代码

例子是获取otp二维码

<template>
  <div>
    <img class="otp-img" :src="imageStr" alt="扫描二维码">
  </div>

</template>

<script setup lang="ts">
import {APIUri, get} from "@/api";
import {onMounted, ref} from "vue";
const imageStr = ref("")

onMounted(()=>{
  getOtpQrCode()
})

const getOtpQrCode = async() =>{
  const res = await get(APIUri.auth.getOtpQrCode, {}, {responseType: 'blob'} )
  imageStr.value = window.URL.createObjectURL(new Blob([res.data]))   // 转换图片为blob
}
</script>

<style scoped>
.otp-img{
  width: 200px;
  height: 200px;
}
</style>