如何在JSP页面中展示从数据库读取的动态图片？

修复步骤 #

• 1. 修正JSP中<c:url>标签写法
  原标签换行拆分可能导致部分web容器解析异常，调整为紧凑写法：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 上面的c标签库引入确认已添加到JSP头部 -->
<img src="<c:url value='/downloadimage'><c:param name='id' value='${obj.id}'/></c:url>" alt="cant show image!" width="200px" height="200px"/>

• 2. 修正控制器方法逻辑
  原代码缺少ServletContext注入、响应初始化、流刷新关闭逻辑，修正后代码如下：

@Controller
public class ImageController {
    // 注入ServletContext避免空指针
    @Autowired
    private ServletContext servletContext;
    @Autowired
    private AutherService autherService;

    @GetMapping("/downloadimage")
    public void downloadimage(@RequestParam("id") int id, HttpServletResponse response) {
        byte[] imageBytes = autherService.getImageAsBytes(id);
        if (imageBytes == null || imageBytes.length == 0) {
            // 无图片时返回404状态码
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        try {
            // 清空响应头避免残留内容影响解析
            response.reset();
            // 固定为jpeg类型，若存储其他格式可对应调整，或从数据库读取图片类型动态设置
            response.setContentType("image/jpeg");
            response.setContentLength(imageBytes.length);
            // 禁止缓存配置可根据业务需求选择是否添加
            response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
            response.getOutputStream().write(imageBytes);
            // 手动刷新关闭输出流保证数据完整传输
            response.getOutputStream().flush();
            response.getOutputStream().close();
        } catch (Exception e) {
            e.printStackTrace();
            response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
        }
    }
}

• 3. 确认DAO层RowMapper逻辑正确
  检查PictureRowMapper对Blob字段的转换逻辑是否正确，参考实现如下：

public class PictureRowMapper implements RowMapper<Picture> {
    @Override
    public Picture mapRow(ResultSet rs, int rowNum) throws SQLException {
        Picture picture = new Picture();
        Blob imageBlob = rs.getBlob("image");
        if (imageBlob != null) {
            int length = (int) imageBlob.length();
            byte[] imageBytes = imageBlob.getBytes(1, length);
            picture.setImageAsBytes(imageBytes);
            // 释放Blob资源
            imageBlob.free();
        }
        // 其他字段赋值逻辑自行补充
        return picture;
    }
}

• 4. 排查测试方法
  直接在浏览器地址栏输入访问路径http://<你的服务地址>/downloadimage?id=<已存在的图片ID>，如果能直接显示图片则后端逻辑正常，问题出在JSP页面的路径解析；如果无法显示则根据后端控制台报错对应排查。

内容的提问来源于stack exchange，提问作者OmarMalek