vue显示二进制图片（后端返回byte数组）

hibiscusxin

已于 2024-01-23 14:05:50 修改

阅读量1k

点赞数 3

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-04-13 16:45:21 首次发布

本文链接：https://blog.csdn.net/qq_41838435/article/details/130134299

版权

Vue 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

vue显示二进制图片（后端返回byte数组）

这里以png为例：

<template>
	<img :src="imageUrl" />
</template>

<script>
export default {
    data() {
        return {
            imageUrl: ''
        }
    },
    methods: {
        getImage() {
            ...
            // 后端返回数据
           let res = 	'iVBORw0KGgoAAAANSUhEUgAAB4AAAAN8CAYAAAC5vbe3AAAAAXNSR0IArs4c6QAAIABJREFUeF7sfXm8XtPV//e58zxnDk0oEtJIDEHNgkpoKyoRKkHRvi2KmKnxRcyqhg5oJTGGn/AWMQ'
 
    
		    // 处理图片
		    this.imageUrl = 'data:image/png;base64,' + res;
		    ...
		 }
    }
}
</script>