vue axios从服务器加载图片并显示
使用场景: 后台传给前端一个图片二进制流,但是要添加httpp header,但是在传统的用img标签查看图片,无法添加http header
this.$axios({
method: 'get',
url: "img url" ,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
"token": this.token // 必须添加的请求头
},
responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
}).then(function (response) { // 将后台的图片二进制流传华为base64
return 'data:image/png;base64,' + btoa(
new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
);
}).then(data=>{
_this.imgUrl=data; // data即为图片地址
});
vue axios从服务器加载图片并显示的更多相关文章
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- 在QtCreator 2.1.0 下使用opencv231库加载图片并显示
在.pro中库连接如上图,具体规则正在学习,注意debug下连接*d.lib.release下链接.lib.没有d的. 如果出现imread不可以加载图片,cvloadImage却可以,则是上面说的连 ...
- vue调用豆瓣API加载图片403问题
"豆瓣API是有请求次数限制的”,这会引发图片在加载的时候出现403问题,视图表现为“图片加载不出来”,控制台表现为报错403. 其实是豆瓣限制了图片的加载,我自己用了一个办法把图片缓存下来 ...
- android开发里跳过的坑——GridView使用Glide加载图片不显示
用grideview显示本地图片列表,用了Glide加载框架,具体调用如下: Glide.with(mContext).load(Uri.fromFile(file)).into(imageView) ...
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识.看个例子:<input type="button" name=&qu ...
- vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- vue动态加载图片
如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...
- Vue优化首屏加载
背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
随机推荐
- 二十四、CI框架之URL辅助函数
一.控制器代码如下: 二.view的显示代码中,关于路径,我们可以用另外一种方法来写, 如: "/CodeIgniter-3.1.10/index.php/welcome/add" ...
- 七、CI框架之分配变量数组,循环输出
一.添加并传递变量 二.在View界面输出 输出显示 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.
- Mac OS 终端 iTerm2配置大全
转载链接:https://www.cnblogs.com/diyxiaoshitou/p/9017413.html,在按照原文执行时发现有些问题,所以本文对原文中存在问题的地方做了些调整. 之前一直使 ...
- gentoo emby-server
最近想用 emby-server + kodi 打造家庭播放平台, 在 gentoo 上面先尝试安装配置 emby-server. 首先, 使用 megacoffee 这个 overlay, 这个上面 ...
- maven的理解和使用
一.maven是什么? maven是项目管理工具 二.maven为什么要用? 在做开发的时候常常会用到外部的工具包(jar包),这就需要你一个一个的去他们的官网下工具包,然后在项目里依赖他们,比较的麻 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习:输出
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- POJ 2039:To and Fro
To and Fro Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 8632 Accepted: 5797 Descri ...
- AT2000 Leftmost Ball 解题报告
题面 给你n种颜色的球,每个球有k个,把这n*k个球排成一排,把每一种颜色的最左边出现的球涂成白色(初始球不包含白色),求有多少种不同的颜色序列,答案对1e9+7取模 解法 设\(f(i,\;j)\) ...
- oracle(9) 序列和约束
序列 SEQUENCE 也是数据库对象之一,作用:根据指定的规则生成一些列数字. 序列通常是为某张表的主键提供值使用. 主键:通常每张表都会有主键字段,该字段的值要求非空且唯一, 使用该字段来确定表中 ...
- 工程日记之HelloSlide(2) : UITextView中如何根据给定的长宽,计算最合适的字体大小
需求描述 一般的需求是将UITextview的大小自适应文本高度,会做出随文本内容增加,文字框不断增大的效果: 本文反其道而行之,在给定文字框大小的情况下:字数越多,字体越小: 需求来源: 考虑将文字 ...