Vue中前端请求后台，后台读取本地磁盘图片，到前端展示

Html代码

<a class="btn btn-primary" @click="viewImg">查看图片</a>
<div id="viewUserImg">
    <img id="userImg" :src="imgUrl">
    <!--<img id="userImg" src="${request.contextPath}/user/viewImg?userId=1">-->
</div>

JavaScript代码

var vm = new Vue({
    //当前vue对象接管的区域
    el: '#test',
    //属性
    data: {
        imgUrl: "user/viewImg"
    },
    //自定义方法
    methods: {
    	viewImg: function () {
			//这里映射的路径和你的包路径有关系，后台的映射路径可以根据具体的进行调整
			//也可以在这里拼接参数，去后台查询，先查询图片地址，然后在操作
			//vm.imgUrl = "user/viewImg?userId=1";
			vm.imgUrl = "user/viewImg";
		}
	}

Java后台代码

	/**
     * 根据用户id，读取相关的用户图片信息
     * @param userId 用户Id
     * @return
     */
    @RequestMapping("user/viewImg")
    public void viewUserImg(@RequestParam("userId") String userId, HttpServletResponse response) {
    	//根据用户Id查询用户信息
        //User user = userService.viewImg(userId, response);
        try {
        	//根据用户的图片路径，创建文件
        	//File file = new File(user.getImgUrl());
            File file = new File("D:\\userImg\\test.png");
            FileInputStream fileInputStream = new FileInputStream(file);
            long size = file.length();
            byte[] temp = new byte[(int) size];
            fileInputStream.read(temp, 0, (int) size);
            fileInputStream.close();
            byte[] data = temp;
            response.setContentType("image/png");
            OutputStream os = response.getOutputStream();
            os.write(data);
            os.flush();
            os.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }