使用场景: 后台传给前端一个图片二进制流,但是要添加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. git提交时设置忽略部分文件提交

    git当前提交项目时总是会提交很多东西把Debug文件也提交了 在项目根目录(例如我的项目文件夹下,.sln文件的上一级目录)下建一个.gitignore文件,文件内容直接可粘贴下面的,这样 pack ...

  2. Android进阶——多线程系列之四大线程池的使用介绍

    线程池一直是初学者最抵触的东西,由于刚开始学习做项目并不会涉及到线程池的使用,但是不去学习它,心里又好像有个石头一直沉着,一直放心不下,其实是很简单的东西,早晚都要学,不如趁现在吧.由于文章从初学者的 ...

  3. POJ 3970:Party

    Party Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submit Status ...

  4. 18 12 4 SQL 的基本 语法

    数据库的基本语法 -- 数据库的操作 -- 链接数据库 mysql -uroot -p mysql -uroot -pmysql -- 退出数据库 exit/quit/ctrl+d -- sql语句最 ...

  5. cmd 删除整个目录

    rmdir 删除整个目录好比说我要删除 222 这个目录下的所有目录和档案,这语法就是: rmdir /s/q 222 其中: /s 是代表删除所有子目录跟其中的档案. /q 是不要它在删除档案或目录 ...

  6. mysql自关联和多表连接查询

    自关联操作         多表连接查询  inner  join 内查询   left  join  左查询   right  join  右查询                          ...

  7. MySQL-TPS,QPS到底是什么

    计算TPS,QPS的方式 qps,tps是衡量数据库性能的关键指标,网上普遍有两种计算方式 TPS,QPS相关概念 QPS:Queries Per Second         查询量/秒,是一台服务 ...

  8. 吴裕雄--天生自然MySQL学习笔记:MySQL 创建数据表

    创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (column_name col ...

  9. PAT-树-DFS-BFS相关问题解决方案整理

    如何建树? 二叉树-建树-方式一 dfs使用root左右指针建立树节点关系,返回根节点root 二叉树-建树-方式二 dfs使用二维数组,int nds[n][2],如:nds[i][0]表示i节点的 ...

  10. PES介绍(转载)

    PES: 1.1 PES介绍: PES--Packetized  Elementary Streams  (分组的ES),ES形成的分组称为PES分组,是用来传递ES的一种数据结构.PES流是ES流经 ...