VUE中如何将后台接口获得的图片显示在页面上

今天碰到一个接口，后端返的二维码是文件流，在preview里能看到，但response里啥都没有，这种情况怎么拿到这张图片呢？

<img :src="codeImg" alt="" /> data()等部分省略，直接看方法 handleImg: function (index) { if (this.dataManage[index].url == null) { this.checkShowImg = true } else { this.showImg = true showImg({ path: this.dataManage[index].url, .

需求：前端接收并展示后端返回的一个图片对象（文件流），没有图片的时候，显示默认图片。

vue读取后台图片地址显示不了读取后台图片方式分析结论解决前端代码后端java代码 读取后台图片方式 正常vue读取图片的方式是读取一个后台传过来这样子http://localhost:8081/img/20170419_110313f.jpg的后台地址，我们就可以读取到图片。 可是有的人可能比如我习惯了 <img src="../../assets/img2/20170301-000.jpg"> 所以我也想做个循环后台传个"…/…/assets/img2/20170301-000.jpg

现在我接手的项目中相关的技术：vue,element-ui,axios ——————接下来看看业务场景—————— 1.看下图（这是图片流，如果直接在img标签下的src中是没有用的）那怎么办呢，别慌往下看 2.解决方法 （1).在请求后端接口返回response const src = window.URL.createObjectURL(response)//这里也是关键,调用window的...

公路系统 上传图片 VUE部分 <ion-card> <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" /> &lt...

Vue 读取后台二进制文件流转为图片显示 有一个项目需要从后台读取文件流转为图片显示到页面上，传回的文件是blob文件格式的，其实很简单，稍作记录。 http 请求是这个样子的。 image/jpeg 格式的。 js代码 this.$http({ url: '请求的接口', method: 'get', // get请求，post改为post responseType: 'blob', params: {

当后端的图片是以部分地址的形式传来时，直接将其使用由于缺少协议主机端口号，因此是无法展示的

前端登录经常用到图形验证码，后端接口返回的是图片数据流，如下图返回图片流这样。首先封装接口api和uuid[就是一个随机数，防止重复]

上传的文件保存在项目目录下的yourFiles目录下，部署以后，存放在容器的/app/yourFiles目录下。注意这里一定要新增 {responseType:'blob'}。

这里返回给前端的对象直接放入了新的文件名，后续会将图片名与路径写入数据库中，返回json格式的name与path对象。也可以考虑实现获取所有静态图片的功能，返回一个列表回去。/*** 传送图片*/@ApiOperation(value = "返回前端发送来的图片") @PostMapping("/upload") public RespBean returnImg(@RequestBody MultipartFile file) {try {//将文件保存指定目录。

height40px;

vue项目中通过接口type为blob的形式获取图片的解决办法

前言：今天遇到的后端传一个二维码图片给我，然后给我的是图片流的形式，看起来跟一堆乱码一样，根本用不了，必须要处理转换后才能使用，然后我看了网上帖子有的说的不是很明白，可能新人看不懂，我就也写一个详细解释一下。也避免时间久了我自己忘记了可以回来轻松的看一下。 效果图：后端发过来的数据 就是这么一长条乱码，就是图片流了 最终经过处理后转换成了二维码 方法： 其实方法很简单，流程整理一下，就是window自带了一个转换的方法叫window.URL.createObjectURL() ，但是光用这个还不行，还要

最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。头像这一栏空荡荡的，我这种强迫症患者难受死！首先声明下，我的数据列表是查询数据库接口返回的，那么我头像路径也是保存在数据库的：我先去网上随便搜了点图片入库里面，先让他能正常展示着，后面有空了再改为通过接口动态上传展示。

调用后端接口发现返回的数据是个png图片，在预览中可以查看： 但是无法打印，打印出来是一堆乱码，如下图所示： 那你就是得到了一个二进制流的图片，你需要转换！ 1、接口页：需要加上blob类型说明responseType: 'blob' export function getHistoryImage(id) { return request({ url: liuqiangBase+'/accBaseInfo/image', method: 'get', params: id,