当前位置: 首页> 文旅> 酒店 > Web Image scr图片从后端API获取基本实现

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

时间:2025/7/10 12:28:37来源:https://blog.csdn.net/zhu7478848/article/details/141189399 浏览次数:0次

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

后端:

 /*** 获取图片流* @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>

在这里插入图片描述

关键字:Web Image scr图片从后端API获取基本实现

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: