uniapp中接口返回二进制数据的图片，前端正确如何显示出图片

阳光雨滴

已于 2023-06-30 22:24:40 修改

阅读量1.1k

点赞数

文章标签：前端 uni-app javascript

于 2023-06-30 22:23:43 首次发布

本文链接：https://blog.youkuaiyun.com/bbkhhvv/article/details/131484547

版权

在Vue项目中，使用typescript编写的组件尝试从接口获取图片数据。原本使用blob对象处理图片在H5端正常工作，但在移动端遇到问题。文章通过将图片数据转换为base64格式并移除换行符，成功解决了移动端图片显示不支持的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>