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 ...
随机推荐
- linux部分环境搭建
连接数据库: mysql -hrm-uf6b23117l3s5t69zjo.mysql.rds.aliyuncs.com -uwswl -pwswl@2019 显示用户: show databases ...
- Aspectj切入点语法定义
例如定义切入点表达式 execution (* com.sample.service.impl..*.*(..)) execution()是最常用的切点函数,其语法如下所示: 整个表达式可以分为五个 ...
- Ubuntu无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?
转自:http://hi.baidu.com/xiaobaishu 鸣谢: xuleibjtu2010的原创空间 1.终端输入 ps -aux ,列出进程.找到含有apt‘-get的进程,直接sud ...
- vue 中使用 vue-fullpage
安装并使用 安装 npm install --save vue-fullpage.js 引入 // 引用fullpage 插件 import Vue from 'vue' import 'fullpa ...
- windows server 2012 ftp搭建
1.安装IIS的时候勾选ftp 2.创建ftp站点,先检查21端口是否开放 一定要勾选身份认证,匿名去掉,不然一直登陆不了,也不提示 一直点下一步, 遇到的坑,第一个:出现“打开ftp服务器上的文件夹 ...
- nodejs(15)express开启cors跨域
express开启cors跨域 package.json "dependencies": { "body-parser": "^1.18.3" ...
- 十六、matplotlib统计图
'''Matplotlib 是一个Python的 2D绘图库.通过 Matplotlib,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率谱,条形图,错误图,散点图等.通过学习Matplotli ...
- POJ 1979:Red and Black
Red and Black Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 26058 Accepted: 14139 D ...
- Log4Net 使用及组合公共类
好记性不如烂笔头,这次是由衷的感受到了! log4net 是一个很好用的日志记录工具,引用入项目中,如何查看项目内部运行情况,如何快速定位异常信息,好的日志记录能帮很大的忙: log4net 很好用, ...
- Ubuntu的man中文包安装
apt-get install manpages-zh vi /etc/manpath.config :,$s#/usr/share/man#/usr/share/man/zh_CN#g 第一个命令: ...