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();
    }
}