【react踩坑】前端显示文件流图片

场景： 后端传过来一个文件流图片，需要前端在页面展示。打印出来的ArrayBuffer对象如下：

一开始借鉴了思否上看到的写法，先把获取的ArrayBuffer转成base-64 编码再显示（Uint8Array数组每一位转码后累加再用btoa函数转成base64编码），实现如下：

function getBase64(img) {const base64Url = `data:image/png;base64,${window.btoa(new Uint8Array(img).reduce((data, byte) => data + String.fromCharCode(byte),""))}`;return base64Url;}// ...axios.get(`/get/pic?url=${url}`, {responseType: "arraybuffer"}).then(({ data }) => { getBase64(data) }).then(() => { ... });

后来经大佬指点，发现原来不用转码，直接把图片src换成请求url就可以了，也不需要加上responseType的请求头

  <img src={`/get/pic?url=${imgId}`} />

【react踩坑】前端显示文件流图片相关推荐

Vue 前端显示文件流图片
简介通过前端vue发送用户图片,后端flask进行处理后返回以文件流形式的图片. 前端代码 <template><v-container> // 注意一个vue文件中只能有一 ...
webpack踩坑之路 (2)——图片的路径与打包
webpack踩坑之路 (2)--图片的路径与打包刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我 ...
Java踩坑笔记 —— base64转换为图片后图片显示不全
Java踩坑笔记 -- base64转换为图片后图片显示不全前言解决思路案例代码结束语前言最近在开发项目中,发现base64转换图片时,出现了图片显示不全,例如如下这样可以明显看到图片部 ...
踩坑ImageMagick将ios图片文件HEIC格式转jpg/png等
近期业务部门要求将heic文件转成jpg文件格式,刚开始使用了各种ImageReader都不可以,后来接触ImageMagick后,发现可以中间也踩了一些坑,现在做一下记录踩过的那些坑. 1.首先需要 ...
【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以例: <div onselectstart="return false;" & ...
ac.find_template 踩坑，寻找相似图片，安卓自动化代码
***** 找了两天问题,对于我这种小白来说,太难了查找对于图片两种方法都找不到:最后附上两种查找方法,及自动化实例失败原因:小图是在大图上面截图的,然而我大图没有显示原比例100% 一定要放大到 ...
react踩坑日记~useRef不会使页面更新
useRef会实时更新数据,但不会使页面更新!想更新页面,就要结合useEffect(第二个值)和useState使用
html2canvas的踩坑之路
前言早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期. html2canvas ...
前端使用html2canvas生成图片踩坑
前端使用html2canvas生成图片经验总结前言主要是总结一下html2canvas生成图片的基础用法,以及自己在使用html2canvas过程中踩过的坑和相应的解决思路背景近段时间接手一个 ...

【react踩坑】前端显示文件流图片

【react踩坑】前端显示文件流图片相关推荐

最新文章

热门文章