前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >后台传的图片流在前端展示图片

后台传的图片流在前端展示图片

作者头像
tianyawhl
发布2020-04-21 10:52:43
2.3K0
发布2020-04-21 10:52:43
举报
文章被收录于专栏:前端之攻略前端之攻略

假如二维码后台传的是图片流,前端展示图片

代码语言:javascript
复制
// 获取二维码图片
    getCodeImg() {
      this.getUUID();
      let UUID = window.sessionStorage.getItem("UUID");
      this.$axios
        .get("getImg", {
          responseType: "arraybuffer",
          params: { clientId: UUID }
        })
        .then(res => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                // String.fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then(data => {
          this.imgUrl = data; //赋值给img标签的src属性
        });
    },
代码语言:javascript
复制
<img :src="imgUrl" alt="二维码图片" v-show="showCode" class="QRcode" />
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档