JavaWeb 從數據庫讀取圖片路徑並在 JSP 頁面顯示圖片的完整指南

前言

在 JavaWeb 開發中，常見的需求是將圖片的路徑存儲在數據庫中，然後在 JSP 頁面動態顯示這些圖片。本文將詳細介紹如何實現這一功能，包括數據庫設計、後端查詢邏輯以及前端 JSP 頁面的渲染方式。

數據庫設計

首先，在數據庫中創建一張表來存儲圖片信息。通常包含以下字段：

• id：主鍵，自增
• image_path：存儲圖片的相對路徑或絕對路徑（例如 /uploads/images/photo.jpg）
• description：圖片描述（可選）

後端查詢邏輯

在 Servlet 或 Controller 中，通過 JDBC 或 ORM 框架（如 MyBatis、Hibernate）查詢數據庫獲取圖片路徑列表，然後將其設置到 request 或 session 域中，轉發到 JSP 頁面。

// 示例：使用 JDBC 查詢圖片路徑
List<String> imagePaths = new ArrayList<>();
String sql = "SELECT image_path FROM images";
try (Connection conn = dataSource.getConnection();
     PreparedStatement ps = conn.prepareStatement(sql);
     ResultSet rs = ps.executeQuery()) {
    while (rs.next()) {
        imagePaths.add(rs.getString("image_path"));
    }
}
request.setAttribute("imagePaths", imagePaths);
request.getRequestDispatcher("/showImages.jsp").forward(request, response);

JSP 頁面顯示圖片

在 JSP 頁面中，使用 JSTL 的 <c:forEach> 標籤遍歷圖片路徑列表，並動態生成 <img> 標籤。

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<div class="image-gallery">
    <c:forEach var="path" items="${imagePaths}">
        <img src="${pageContext.request.contextPath}${path}" alt="圖片" style="max-width: 300px; margin: 10px;" />
    </c:forEach>
</div>

注意事項

• 確保圖片路徑對 Web 應用可訪問，通常將圖片存放在項目部署目錄下的 uploads 或 static 文件夾中。
• 如果圖片存儲在數據庫 BLOB 字段中，則需要編寫一個單獨的 Servlet 來讀取二進制數據並輸出圖片流，JSP 中的 src 指向該 Servlet（如 <img src="ImageServlet?id=1" />）。
• 生產環境建議使用 CDN 或獨立文件服務器存儲圖片，數據庫僅存儲 URL。

總結

通過將圖片路徑存儲在數據庫，後端查詢後傳遞給 JSP，前端遍歷渲染 <img> 標籤，即可實現動態圖片展示。這種方式結構清晰，易於維護和擴展。