使用场景: 后台传给前端一个图片二进制流,但是要添加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. x264报错No working C compiler found.

    现象: 缺少C++部署包 解决 [root@localhost x264]# yum -y install gcc gcc-c++ kernel-devel [root@localhost x264] ...

  2. 黑马oracle_day01:03.oracle的查询

    01.oracle体系结构 02.oracle的基本操作 03.oracle的查询 04.oracle对象 05.oracle编程 黑马oracle_day01:03.oracle的查询 09scot ...

  3. linux常用命令之------文件操作、文件查看、权限、打包压缩

    1.一般公司把linux作为自己的应用服务器,将应用和服务器部署在上面 2.测试一般用来打包.压缩.查日志,写一个简单的shell 获得linux服务器的方式 a:网上租一台云服务器 b:安装vmwa ...

  4. Mybatis实现条件查询(三)

    1. 准备 请先完成Mybatis基本配置(一)的基本内容 2. 疑问 我们再Mybatis基本配置(一)中实现了按照商品ID进行查询商品信息,可是在实际应用中却很少出现根据ID来查询商品的情况.因为 ...

  5. 改变UILable里面文字的大小和颜色

    UILabel *lb = [[UILabel alloc]init]; NSMutableAttributedString *attriStr = [[NSMutableAttributedStri ...

  6. 吴裕雄--天生自然MySQL学习笔记:MySQL 处理重复数据

    有些 MySQL 数据表中可能存在重复的记录,有些情况允许重复数据的存在,但有时候我们也需要删除这些重复的数据. 防止表中出现重复数据 可以在 MySQL 数据表中设置指定的字段为 PRIMARY K ...

  7. CF round #622 (div2)

    CF Round 622 div2 A.简单模拟 B.数学 题意: 某人A参加一个比赛,共n人参加,有两轮,给定这两轮的名次x,y,总排名记为两轮排名和x+y,此值越小名次越前,并且对于与A同分者而言 ...

  8. SEO初步学习之影响网站排名的因素

    本文介绍一些比较明显的因素,一些隐藏较深的原因还有待发掘: 1.采集网站内容,即抄袭其他网站的内容. 2.新站上传后建议不要有大的改动. 3.标题频繁修改. 4.大量投放垃圾外链. 5.不做友链,交友 ...

  9. mysql增删查改

    <?php     $db_host   = 'localhost:3306';     $db_user   = 'root';     $db_passwd = '';     $db_na ...

  10. Gym102361E Escape

    Link 首先我们可以推出一些有用的结论: 1.任意两个机器人之间的路线不能重合,但是可以垂直交叉. 2.如果一个格子没有转向器,那么最多允许两个机器人以相互垂直的方向通过. 3.如果一个格子有转向器 ...