Web Image scr图片从后端API获取基本实现

embedded/2024/9/24 7:50:39/

因系统开发中需求,会有页面显示图片直接从后端获取后显示,代码如下:

后端:

 /*** 获取图片流* @param response* @param fileName*/@RequestMapping(value="getImgStream",method = RequestMethod.GET)public void getImgStream(HttpServletResponse response,@RequestParam("idFile")String  fileName){FileInfo fileInfo = fileService.getByName(fileName);FileInputStream fis = null;response.setContentType("image/"+fileInfo.getRealFileName().split("\\.")[1]);try {OutputStream out = response.getOutputStream();File file = new File(fileInfo.getAblatePath());fis = new FileInputStream(file);byte[] b = new byte[fis.available()];fis.read(b);out.write(b);out.flush();} catch (Exception e) {logger.error("getImgStream error",e);} finally {if (fis != null) {try {fis.close();} catch (IOException e) {logger.error("close getImgStream error",e);}}}}

前端

js文件

拼接后端API路径
img = util.getApiUrl() + '/file/getImgStream?idFile=' + item.img

Vue页面

<el-image style="height: 200px" :src="item.img" fit="contain"></el-image>

在这里插入图片描述


http://www.ppmy.cn/embedded/94925.html

相关文章

贪心算法part03

134 加油站 在一条环路上有 N 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 如果你可以绕环路行…

在 MySQL 中查找最小的缺失 ID

文章目录 前言问题背景基本查询方法优化与改进扩展思考总结 前言 在开发过程中&#xff0c;我们经常会遇到需要查找数据库表中最小的缺失 ID 的情况&#xff0c;特别是在处理需要顺序标识符的业务逻辑时。本文将探讨如何在 MySQL 中高效地查找某一表中最小的没有被占用的 ID&a…

Vue3+Echarts+饼图环形图

记得给容器宽高 <div id"leftChartguawang" style"height: 28vh"></div> 配置函数 const leftChartguawang () > {const chartBox echarts.init(document.getElementById(leftChartguawang))let datas [[{ name: 居民节能建筑, value…

利用单张/多张图内参数标定 OpenCV Python

E:\OpenCV_py_ws\opencv相机标定\图片\calib-JT.py #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2023/11/21 16:05 # @File : calib.py # @Software: import cv2 import numpy as np import glob from datetime import datetimenp.set_printoptions(supp…

不依靠for循环,Python如何对列表进行去重并保留排列顺序

在python中&#xff0c;我们想要从列表中删除重复元素&#xff0c;并且保留去重之前的先后排列顺序。在这里&#xff0c;我们本文不谈论for循环&#xff0c;我们来谈论其他的更优方法——OrderedDict和set。 要知道&#xff0c;OrderedDict可以通过保留插入顺序来实现元素去重…

系统架构师学习大纲(四)

一、培养沟通和领导技能 1、与团队成员和利益相关者沟通 沟通是一种重要的技能&#xff0c;特别是在领导角色中。一个有效的领导者应能够与团队成员和其他利益相关者进行清晰、明确地沟通&#xff0c;要在沟通方面培养技能。 学习倾听&#xff1a;倾听是沟通的重要组成部分。…

Leetcode每日刷题之 1089. 复写零(C++)

1. 题目解析 由题目可知&#xff0c;我们需要将给定数组中的所有零复写一遍&#xff0c;并且保证不能超出数组长度&#xff0c;还不可以开辟新的数组&#xff0c;要在原数组的位置直接操作 2. 算法原理 1. 由题目我们可以将问题简化为找出最终复写完成数组的最后一个元素&#…

Linux Shell基础常用脚本命令及应用案例

文章目录 常用的 Shell 命令1. 变量2. 注释3. 输出4. 输入5. 条件判断6. 循环7. 函数8. 运算9. 流程控制10. 文件和目录操作11. 错误处理 Shell 脚本应用案例1. Hello World 脚本2. 创建系统账户及设置密码3. 日志文件备份4. 一键部署 LNMP 环境5. 检查磁盘空间6. 自动安装软件…