使用场景: 后台传给前端一个图片二进制流,但是要添加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从服务器加载图片并显示的更多相关文章

  1. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  2. 在QtCreator 2.1.0 下使用opencv231库加载图片并显示

    在.pro中库连接如上图,具体规则正在学习,注意debug下连接*d.lib.release下链接.lib.没有d的. 如果出现imread不可以加载图片,cvloadImage却可以,则是上面说的连 ...

  3. vue调用豆瓣API加载图片403问题

    "豆瓣API是有请求次数限制的”,这会引发图片在加载的时候出现403问题,视图表现为“图片加载不出来”,控制台表现为报错403. 其实是豆瓣限制了图片的加载,我自己用了一个办法把图片缓存下来 ...

  4. android开发里跳过的坑——GridView使用Glide加载图片不显示

    用grideview显示本地图片列表,用了Glide加载框架,具体调用如下: Glide.with(mContext).load(Uri.fromFile(file)).into(imageView) ...

  5. js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)

    通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识.看个例子:<input type="button" name=&qu ...

  6. vue动态加载图片,取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  7. vue动态加载图片

    如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...

  8. Vue优化首屏加载

    背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...

  9. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

随机推荐

  1. mysql第四篇:数据操作

    第四篇:数据操作 一.数据操作介绍 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作 1.INSERT实现数据的插入 2.UPDATE实现数据的更新 3.DELETE实现数据的 ...

  2. 模块化CommonJs规范 part1

    CommonJS规范 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 1.概述 Node 应用由模块组成,采用 CommonJS 模块规范. 每个文件就是一个模块, ...

  3. 根据M3U8地址下载视频

     下面展示的是通过M3U8地址,把这个地址转为一个视频文件:只是一个基本案例,当然,有些下载的M3U8文件里面格式是不一样的,还有的是加过密的,道理都是一个道理. import java.io.Buf ...

  4. 自己组装一台1U服务器

    视频资料链接 自己组装一台1U服务器 执行思路: 1.评估访问了,根据需求确定服务器要求 2.根据要求选择硬件:冗余.稳定等 3.搜索主流服务器参数进行对比,及对比价格 4.咨询IDC机房价格 DIY ...

  5. Centos下nginx安装

    安装很简单,这里记录只是为了记下下载地址: A.[root@localhost soft]# wget http://nginx.org/download/nginx-1.4.2.tar.gz B.[ ...

  6. 程序员用 Python 扒出 B 站那些“惊为天人”的UP主!

    ​ 前言 ! 近期B站的跨年晚会因其独特的创意席卷各大视频网站,给公司带来了极大的正面影响,股价也同时大涨,想必大家都在后悔没有早点买B站的股票: ​ 然而今天我们要讨论的不是B站的跨年晚会,而是B站 ...

  7. CSS(3)之 less 和rem

    less 预编译脚本语言. LESS 语法 less语法2 LESS中文 rem rem的适配原理 rem 是相对于页面根源素html的字体大小的一个尺寸单位 页面内容可以使用rem为单位,那么htm ...

  8. PPT |《Kubernetes的兴起》

    京东云开发者社区技术沙龙--<Cloud Native时代的应用之路与开源创新> Part1-<Kubernetes的兴起> 欢迎点击"链接"了解更多精彩内 ...

  9. STM32F407读编码器没上拉电阻遇见的问题

    在调试之前由于本科阶段参加飞思卡尔智能汽车的竞赛,一直在使用与竞赛相关的单片机和编码器,后来由于工程的需要开始使用STM32的板子,在调试编码器的时候遇见了,使用了STM32的官方标准库中的定时器正交 ...

  10. Java数据的存储

    在JAVA中,有六个不同的地方可以存储数据: 1. 寄存器(register).这是最快的存储区,因为它位于不同于其他存储区的地方——处理器内部.但是寄存器的数量极其有限,所以寄存器由编译器根据需求进 ...