图片流

有时候服务端返回的一张图片是一串文件流，而文件流无法直接加在 img 标签上进行渲染，如下：

哦豁，有点蛋疼了吧。

这时候请求的链接其实就是当前图片的路径。

但是我们的图片路径往往是通过网络请求出来的，它是动态的。
这时候可以试试这个。

axios 解决

通过在 axios 添加responseType: "blob",将当前的请求变成blob这时候就能得到如下

然而由于是 blob格式的我们依然无法直接将返回结果直接放在img标签进行展示。
这时候我们还需要window.URL.createObjectURL(res.data);将当前的blob转化一下，如图

axios 示例

request({url: API.getQrCode,method: "get",responseType: "blob",}).then((res) => {if (res.data.size < 100) {this.$message({showClose: true,center: true,message: "生成二维码失败！",type: "error",});this.qrCode = "";return;}this.qrCode = window.URL.createObjectURL(res.data);}).catch((err) => {this.qrCode = "";console.log(err);});

img标签渲染图片流相关推荐

uniapp做H5项目渲染后端接口返回的图片流
这篇文章适用于uniapp做的H5项目,不适用于小程序. 今天接到个需求,是登录页面获取验证码,调后端接口之后得到的是一个图片流信息,要渲染到前端. 如图可以看到返回的是一张图片,我们控制台打印res ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
php读取图片输出,php读取图片流输出到页面图片
读取图片流代码 @ header("Content-Type:image/png"); $imagespath = $_GET['imagespath']; $vms_ini_pa ...
小米MIX4最新渲染图曝光；苹果首款OLED iPad将于2023年问世；格力将引进鸿蒙操作系统|极客头条...
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
vue获取图片流数据并展示
vue获取图片流数据并展示一.问题描述二.数据获取三.数据展示 1.window.URL.createObjectURL() (1)URL (2)createObjectURL 2.封装blob ...
python的flask前端显示图片_python Flask中返回图片流给前端展示
python Flask中返回图片流给前端展示 image DHogan 2017-05-16 14:50:48 image 20440 image 收藏 12 版权场景需求:需要在Flask服务器 ...
H5之webcoekt播放JPEG图片流
一.简介既然webcoekt是基于tcp连接的,理论上讲所有的浏览器是可以私有协议处理二进制的,如果我们需要播放视频,我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端,然后前端通过 ...
html5 图片流,Html5之webcoekt播放JPEG图片流
一.简介既然webcoekt是基于tcp连接的,理论上讲所有的浏览器是可以私有协议处理二进制的,如果我们需要播放视频,我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端,然后前端通过 ...
zb怎么做渲染图_zb制作和通过照片绘制真实黑人头
效果图: 关于图像朱峰社区发现这个教程制作效果很真实,本人发现在不少画廊中都有大量肖像渲染图.我总是被那些高画质的MentalRay快速皮肤材质(FastSkinshader)打动,一旦理解了这种皮 ...
python的flask前端显示图片_python 实现Flask中返回图片流给前端展示
场景需求:需要在Flask服务器的本地找一张图片返回给前端展示出来. 问题疑点:通常前端的标签只会接受url的形式来展示图片,没试过在返回服务器本地的一张图片给前端. 因此写个记录一下这个看起来有点奇 ...

img标签渲染图片流

图片流

axios 解决

img标签渲染图片流相关推荐

最新文章

热门文章