<template>
<img class="img" :src = "image" alt="加载中" />
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, computed, watch } from 'vue';
import { codeMessage} from '../../api';
const image = ref('');
onMounted( async() => {
try{
codeMessage().then((res) => { //调用接口
console.log(res)
//这块是核心,之前一直用blob对象转的,h5端好使,但是移动端却不行,好像移动端不支持blob于是换成这样写就好使了
image.value = 'data:image/png;base64,'+res.data.img;
image.value = image.value.replace(/[\r\n]/g,'')
});
}catch(error){
}
</script>
uniapp中接口返回二进制数据的图片,前端正确如何显示出图片
于 2023-06-30 22:23:43 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)