首页 > 其他分享 >【vue】后端接口返回了在预览中展示的png(二进制流)如何展示在前端页面?

【vue】后端接口返回了在预览中展示的png(二进制流)如何展示在前端页面?

时间:2022-11-19 11:45:39浏览次数:57  
标签:vue 展示 url res image let data png

代码

  created() {
    axios({
      url: "http://localhost:8080/img/getimg",
      responseType: "blob", //关键
    }).then((res) => {
      let data = new Blob([res.data]);
      let url = window.URL.createObjectURL(data);
      this.image = url; //image是图片的路径
    });
  },

标签:vue,展示,url,res,image,let,data,png
From: https://www.cnblogs.com/luoking/p/16905762.html

相关文章

  • vue3学习笔记(一)
    helloworld<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>ECharts</title><!--方法有用--><!--<scriptsrc="https://unpkg.c......
  • vue3学习笔记(二)
    应用&组件实例//应用实例constapp=Vue.createApp({data(){return{count:4}}})//组件实例constvm=app.mount('#app')console.log(vm.count......
  • vue tab 切换
    <template><view><!--内容--><viewclass="content_box"><viewclass="content"><!--分类-->......
  • 后端初学Vue
    一、Vue介绍     二、Vue的使用(1)Vue最简单的方法是引入Vue.js,可以在html中混合使用,如下:html里引入<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2"><......
  • 解决SPA单页面应用(create-react-app,Vue-cli)路由跳转后404的问题。
    在Nginx中配置try_filesserver{listen80;server_namelocalhost;root"****";location/{ try_files$uri$uri/......
  • vue3-cookies
    安装npminstallvue3-cookies--savemain.jsimport{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store......
  • Vue中使用Mock,devSever中before方法弃用>webpack新版本出现的vue.config.js配置问题:op
    话不多说直接上代码:1、mock相关配置(mock/index.js),这里仅使用 setupMiddlewares其余旧版级过渡版本方法见官网1//引入mock2constMock=require('mockjs');......
  • vue后台管理系统"编辑按钮"书写逻辑
    不废话上思路外部el-table-column是基础table模板,里面templateslot-scope的主要作用就是获取table一行的数据信息;其次要加一个对话框,在对话框里输入数值然后提交就可......
  • Vue.js -- 条件渲染
    条件渲染v-if的用法代码演示:<head><title>vue条件渲染</title><!--使用CDN引入Vue--><scriptsrc="https://unpkg.com/vue@next"></script></head><b......
  • Vue的基本使用
    引入vue.js<scriptsrc="vue.min.js"></script><scriptsrc="vue-router.min.js"></script>创建vue对象,绑定id<body><divid="app"></div> <scr......