springMVC+img标签实现图片展示

最新推荐文章于 2021-09-22 15:28:59 发布

原创最新推荐文章于 2021-09-22 15:28:59 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何使用SpringMVC结合img标签实现图片展示，并探讨了通过设置HTTP响应头Cache-Control和Expires来优化图片加载，提高性能的方法。

基本思路

html中的img标签请求，springmvc中的controller这层返回数据

前端代码

<img alt="" src="getImg?id=1">
<img alt="" src="getImg?id=2">

后台代码

ImageUtil
/**
 * 获得指定文件的byte数组
 */
public static byte[] getBytes(String filePath) {
    byte[] buffer = null;
    try {
        File file = new File(filePath);
        FileInputStream fis = new FileInputStream(file);
        ByteArrayOutputStream bos = new ByteArrayOutputStream(1000);
        byte[] b = new byte[1000];
        int n;
        while ((n = fis.read(b)) != -1) {
            bos.write(b, 0, n);
        }
        fis.close();
        bos.close();
        buffer = bos.toByteArray();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
    return buffer;
}


@Controller
public class HomeController

@RequestMapping({ "/", "/getImg" })
public void getImg(Map<String, Object> model, HttpServletResponse response, HttpServletRequest request) throws IOException {
    String id = request.getParameter("id").toString();

    //设置header
    response.setHeader("Pragma", "No-cache");   
    response.setHeader("Cache-Control", "no-cache");   
    response.setDateHeader("Expires", 0L);

    OutputStream os = response.getOutputStream();
    byte[] btImg = null;
    // FIXME: test datas, new data will replace
    if("1".equals(id)) {
        btImg = ImageUtil.getBytes("F://637259347290662623.jpg");
    } else {
        btImg = ImageUtil.getBytes("F://6597643711726332151.jpg");
    }

    os.write(btImg);  
    os.flush(); 
}

代码提升点

在输出图片时可以设置response的header中Cache-Control、dateheader的Expires来控制图片的缓存，可以避免每次加载图片都要做读取，写入输出流的操作。提高性能。
参考
http://www.cnblogs.com/cuixiping/archive/2008/05/04/1181056.html