response响应图片

前言：在页面中，我们可以使用img标签来显示图片，img标签的src属性一般填写图片相对路径或者网络路径，来展示图片。除了这种方式外，还可以通过访问服务端，服务端以response的方式响应给客户端图片的流。

• 下面是一段html代码，用于展示图片

<div>
	<!--注意：src的值是后端的controller对应的方法，因为图片路径是存在数据库中的，因为通过id查取出相应数据-->
	<img src="picture/showQRCode?id=${id}" alt="二维码图片">
</div>

• 下面是服务端代码，用于响应图片的流

/*
* 显示二维码图片，通过图片路径，读取到图片的信息，响应到客户端
*/
@RequestMapping("/showQRCode")
@ResponseBody
public void showQRCode(HttpServletRequest req,HttpServletResponse res){
	String id = res.getParameter("id");
	QRCode qrCode =  QRCodeService.selectById(id);
	//通过id查询出图片的保存路径
	String path = qrCode.getPath();
	if(StringUtils.isNotEmpty(path)){
		//载入图片
		BufferedImage buffImg = ImageTo.read(new FileInputStream(path));
		//禁止图片缓存
		res.setHeader("Pragma","no-cache");
		res.setHeader("Cache-Control","no-cache");
		res.setDateHeader("Expires",0);
		//因为我的图片是png格式的，所以我在contentType写死了。实际开发中，根据图片类型来修改相应的contentType
		res.setContentType("image/png");
		//将图片输出到Servlet输出流中
		ServletOutputStream sos = res.getOutputSteam();
		ImageIO.write(buffImg,"png",sos);
		sos.close();
	}
}

结语：以上代码不仅适用于混合开发的项目，同样适用于前后端分离的项目，只需要将img标签的src属性给予正确的值即可。