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框架之数据库操作delete用法
一.代码如下: 二.执行f访问 三.查看数据库,已经id=15的数据已经被删掉了 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦, ...
- 登录之后跳转到登录之前的页面 之 Referer 的坑
简而言之:通过鼠标在页面上点击链接发送请求,请求header中会包含referer信息, 通过在浏览器地址栏书写并发送请求的,header中不会有referer信息. 为了完成登录动作成功后返回原页面 ...
- Android自定义View——QQ音乐中圆形旋转碟子
1.在onMeasure中测量整个View的宽和高后,设置宽高 2.获取我们res的图片资源后,在ondraw方法中进行绘制圆形图片 3.通过Handler发送Runnable在主线程中更新UI,达到 ...
- 80.常用的返回QuerySet对象的方法使用详解:order_by
order_by: 将模型生成的表按照某个字段进行排序,默认情况下,按照升序的顺序排序,如果想要按照降序的顺序排序可以在字段的前面加一个"-",加一个负号就可以进行反转. mode ...
- WOJ 1543 Array
还是聪哥给我讲的思路才知道的,起初我利用两两互质去求发现有问题,互质只是必要条件而非充分条件,后来还是用的标准思路 即其实最终只要保留最大的素数的幂即可,其他包含该素数幂但指数低的都不用了,这样就能保 ...
- linux messages日志出现kernel: nf_conntrack: table full, dropping packet
上述结果会让业务访问很慢!各种网络服务耗时大幅上升,各种time out,各种丢包,完全无法正常提供服务,大并发业务场景下,开防火墙很容易出现这种问题. 解决方法1:关闭分防火墙服务 解决方法2:修改 ...
- ZooKeeper解决的问题
1.解决分布式单点问题 https://www.jianshu.com/p/08b76bd7a634 2.实现分布式环境数据的一致性.访问ZooKeeper树结构时,不同节点返回的数据是一致,不会引起 ...
- 01Java-方法
一:动手动脑 1.编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数 package reserve; import java.util.Scanner; import java.ut ...
- rename 修改文件名
Linux的 rename 命令有两个版本,一个是C语言版本的,一个是Perl语言版本的,早期的Linux发行版基本上使用的是C语言版本的,现在已经很难见到C语言版本的了,由于历史原因,在Perl语言 ...
- Python笔记_第四篇_高阶编程_二次封装
1.二次封装: 二次封装其实就是对一个类或者一个方法进行二次的改造增加新的功能. 2.一个类的二次封装: 我们以一个进程为例,我们把Process这个库进行二次封装,增加一些功能,在调用. thoma ...