api返回图片如何在界面中显示

故障背景

在工作中需要一个验证码功能，后台接口给我返回的是一个文件流的形式，在控制台中查看是一连串的乱码

故障排除思路

第一步当然是先在别人身上找原因啦，首先排除接口问题

在这里我问后端小伙伴，后端小伙伴用postman测试是好的，但是在浏览器的控制台显示却是乱码，所以是前端的故障

第二步查资料文件流如何转成img

查询之后得知使用这行代码就能把文件流变成base64编码格式

const resB = await getCaptchaUrl(this.captchaId);
this.captchaUrl = 'data:image/png;base64,' + btoa(new Uint8Array(resB).reduce((data, byte) => data + String.fromCharCode(byte), ''))

但是在页面中显示不出来于是又百度，发现是因为用的axios，他会把所有的字符串当作json格式并转码，所以显示不出来，然后我就自己封装了一个请求头

export const getRequest = (url) => {return axios({method: 'get',url: `${base}${url}`,responseType:'arraybuffer' // 只要加上这行代码就行了});
};

在将 captchaUrl 绑定到img src属性中

页面效果

api返回图片如何在界面中显示相关推荐

php生成cmyk图片,用ImageMagick创建cmyk颜色的图片，在photoshop中显示的cmyk值不一样！...
各位好!我在php里用ImageMagick创建cmyk颜色的图片,在photoshop中显示的cmyk值不一样!比如:在ImageMagick通过ImagickPixel设置的颜色为cmyk(0,0 ...
ypora中的图片传入到CSDN中显示错误
ypora中的图片传入到CSDN中显示错误文章目录 ypora中的图片传入到CSDN中显示错误一.需要购买阿里云OSS 1.首先需要进入阿里云官网购买,如下图二.需要安装PinGo 1.百度搜索 ...
linux非图形化界面,在Linux图形界面中显示中文，非图形界面中，显示英文
在Linux图形界面中显示中文,非图形界面中,显示英文设置语言,应当改环境变量LANG 1. 在非Xwindow下显示英文.非Xwindow下不能显示中文汉字,如果设置成中文,则中文部分显示乱码,第 ...
react方法返回html_#react# 在页面中显示html代码块
在页面中显示html代码块在网上查了下,说有一下方法可以把html代码直接在页面中输出. textarea 不让编辑去边框去滚动条直接把代码用ps做成图片上传到网页用转换符号在jsx中前面 ...
java界面中显示图片_java中怎样在界面中显示图片？
方法一: JLabel helloLabel = new JLabel("New label"); helloLabel.setIcon(new ImageIcon("E ...
android png图片背景黑色,Android中显示PNG图标背景变黑色
最近项目中遇到一个问题:就是从网络获取应用PNG图标后,显示到GridView中,发现图标透明的地方都变成了黑色?为什么呢? 个人习惯有问题先梳理一遍代码: 一.从网络异步下载图标并显示代码 clas ...
在Qt界面中显示OpenCV图像
OpenCV中的图像主要存储在Mat类中,要让其显示在Qt的Label控件上,必须先将其转换为Qt的QImage类. Mat类图像是按照BGR顺序存储的图像,而QImage是按照RGB顺序存储的,在类 ...
在界面中显示文本内容
iOS有单行和多行显示文本的控件对象: UITextField:简单的单行 UITextView:可滚屏的多行在这里使用的是多行文本,即UITextView. 代码很简单,需要声明该视图的位置,字体 ...
java界面中加载图片,Java登录界面中添加背景图片,程序无错，但加载不了图片，求帮忙...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 import java.awt.*; import javax.swing.*; public class Demo extends JFrame { p ...

api返回图片如何在界面中显示

故障背景

故障排除思路

第一步当然是先在别人身上找原因啦，首先排除接口问题

第二步查资料文件流如何转成img

api返回图片如何在界面中显示相关推荐

最新文章

热门文章

api返回图片如何在界面中显示

故障背景

故障排除思路

第一步 当然是先在别人身上找原因啦，首先排除接口问题

第二步 查资料文件流如何转成img

api返回图片如何在界面中显示相关推荐

最新文章

热门文章

第一步当然是先在别人身上找原因啦，首先排除接口问题

第二步查资料文件流如何转成img