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

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

后端：

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