超好用-后端返回图片乱码Vue前端的处理方式

小刘加油！

已于 2022-07-14 17:22:37 修改

阅读量3.8k

点赞数 3

文章标签：前端 vue.js javascript 图片乱码

于 2022-03-08 17:48:08 首次发布

本文链接：https://blog.csdn.net/qq_41131745/article/details/123358717

版权

当后端返回的图片信息显示为乱码时，前端可以采用转换方式来正确显示。通过将二进制流转化为`data:image/jpeg;base64,`格式的字符串，然后设置到`img`标签的`src`属性中，即可解决这个问题。例如，使用`btoa`和`reduce`方法将新的Uint8Array转换为Base64编码。

摘要由CSDN通过智能技术生成

vue处理后端图片乱码问题

后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片
后端返回的信息如下图：

在这里插入图片描述

这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。

state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`

将imgUrl的值放入img标签的src路径下即可。

小刘加油！

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
13
评论
超好用-后端返回图片乱码Vue前端的处理方式

vue处理后端图片乱码问题后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片后端返回的信息如下图：这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`将imgUrl的值放入img标签
复制链接

扫一扫