使用场景: 后台传给前端一个图片二进制流,但是要添加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. 对input type=file 修改样式

    效果图先给: 在html中涉及到文件选择的问题,文件选择使用 input(class="filter_input form-control" type="file) 但是 ...

  2. 吴裕雄--天生自然TensorFlow2教程:合并与分割

    import tensorflow as tf # 6个班级的学生分数情况 a = tf.ones([4, 35, 8]) b = tf.ones([2, 35, 8]) c = tf.concat( ...

  3. 寒假day21

    标签模块报了一些错误,暂时没有找出原因.刷了一些面试题

  4. (day 1)创建项目--3【创建应用】

    创建步骤 1.打开命令行,进入项目中manage.py的同级目录 2.在命令行输入 python manage.py startapp blog 3.添加应用名到settings.py的INSTALL ...

  5. Jackknife,Bootstrap, Bagging, Boosting, AdaBoost, RandomForest 和 Gradient Boosting的区别

    Bootstraping: 名字来自成语“pull up by your own bootstraps”,意思是依靠你自己的资源,称为自助法,它是一种有放回的抽样方法,它是非参数统计中一种重要的估计统 ...

  6. 201803-1 跳一跳 Java

    思路: 一个变量plus记录叠加的数,遇到2就+2 import java.util.Scanner; public class Main { public static void main(Stri ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习: 正则表达式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. UML-测试驱动开发

    1.什么是测试驱动开发? 测试驱动开发(TDD)是迭代和敏捷XP方法提倡的优秀实践,该实践为测试测试优先开发.不仅包含单元测试. 2.为什么测试驱动开发? 1).最大提升代码稳定性 2).澄清接口和行 ...

  9. nginx 负载策略

    1.轮询(weight=1) 默认选项,当weight不指定时,各服务器weight相同,每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. upstream bak ...

  10. Ubuntu的软件安装管理---dpkg与apt-*详解

    摘要:软件厂商先在他们的系统上面编译好了我们用户所需要的软件,然后将这个编译好并可执行的软件直接发布给用户安装.不同的 Linux 发行版使用不同的打包系统,一般而言,大多数发行版分别属于两大包管理技 ...