在JSP中读取数据库中的图片路径并显示图片，是Web开发中常见的需求，数据库中存储的并非图片的二进制数据，而是图片的文件路径（如"/images/photo.jpg"），JSP通过读取该路径来动态加载图片,以下是详细的实现步骤和代码示例。
数据库准备
确保数据库中存在存储图片路径的表，创建一个名为product的表，包含id（产品ID）、name（产品名称）和image_path（图片路径）字段：
CREATE TABLE product (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100),
image_path VARCHAR(255)
);
插入测试数据：
INSERT INTO product (name, image_path) VALUES ('手机', '/images/phone.jpg');
INSERT INTO product (name, image_path) VALUES ('电脑', '/images/laptop.jpg');
JSP实现步骤
建立数据库连接
使用JDBC连接数据库，需在WEB-INF/lib中添加数据库驱动（如MySQL的mysql-connector-java.jar），创建数据库连接工具类DBUtil.java：
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtil {
private static final String URL = "jdbc:mysql://localhost:3306/your_database";
private static final String USER = "root";
private static final String PASSWORD = "password";
public static Connection getConnection() throws SQLException {
return DriverManager.getConnection(URL, USER, PASSWORD);
}
}
编写数据访问对象（DAO）
创建ProductDAO.java类,用于从数据库查询产品信息：
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class ProductDAO {
public List<Product> getAllProducts() {
List<Product> products = new ArrayList<>();
String sql = "SELECT id, name, image_path FROM product";
try (Connection conn = DBUtil.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
ResultSet rs = pstmt.executeQuery()) {
while (rs.next()) {
Product product = new Product();
product.setId(rs.getInt("id"));
product.setName(rs.getString("name"));
product.setImagePath(rs.getString("image_path"));
products.add(product);
}
} catch (SQLException e) {
e.printStackTrace();
}
return products;
}
}
创建实体类
定义Product.java实体类,对应数据库表结构：
public class Product {
private int id;
private String name;
private String imagePath;
// Getters and Setters
public int getId() { return id; }
public void setId(int id) { this.id = id; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public String getImagePath() { return imagePath; }
public void setImagePath(String imagePath) { this.imagePath = imagePath; }
}
在JSP中显示图片
创建showProducts.jsp页面,通过EL表达式和JSTL标签库展示数据：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>产品图片展示</title>
</head>
<body>
<h1>产品列表</h1>
<table border="1">
<tr>
<th>ID</th>
<th>名称</th>
<th>图片</th>
</tr>
<c:forEach items="${products}" var="product">
<tr>
<td>${product.id}</td>
<td>${product.name}</td>
<td>
<img src="${product.imagePath}" alt="${product.name}" width="100" height="100">
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
控制层逻辑
在Servlet中调用DAO并转发数据到JSP，创建ProductServlet.java：
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/products")
public class ProductServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ProductDAO dao = new ProductDAO();
List<Product> products = dao.getAllProducts();
request.setAttribute("products", products);
request.getRequestDispatcher("showProducts.jsp").forward(request, response);
}
}
注意事项
-
路径问题：
- 若图片路径是相对路径（如
images/phone.jpg），需确保JSP页面与图片的相对位置正确。 - 推荐使用绝对路径（如
/projectName/images/phone.jpg）,避免因部署路径变化导致图片无法显示。
- 若图片路径是相对路径（如
-
图片显示失败排查：
- 检查数据库中的路径是否正确。
- 确认图片文件是否存在于服务器指定目录下。
- 浏览器开发者工具中查看图片加载状态（如404错误）。
-
安全性：
避免直接拼接用户输入的路径，防止路径遍历攻击,可对路径进行合法性校验。
相关问答FAQs
Q1: 如果图片存储在Web应用的WebContent/images目录下，JSP中如何正确引用？
A1: 假设图片路径在数据库中存储为/images/phone.jpg，且WebContent为Web应用根目录，JSP中的<img>标签可直接使用该路径。
<img src="${product.imagePath}" alt="图片">
若部署后的上下文路径（Context Path）不为空（如/myApp），需确保数据库中的路径包含上下文路径，或在JSP中动态拼接：
<img src="${pageContext.request.contextPath}${product.imagePath}" alt="图片">
Q2: 如何处理图片路径包含中文字符时显示乱码的问题？
A2: 乱码通常由URL编码或字符集不一致导致，解决方案：
- 数据库存储时统一编码：确保数据库表字段使用
utf8mb4字符集，插入数据时对路径进行URL编码（如URLEncoder.encode(path, "UTF-8")）。 - JSP页面设置编码：在JSP顶部添加
<%@ page pageEncoding="UTF-8" %>，并在<head>中指定字符集：<meta charset="UTF-8">
- 解码路径：若数据库中存储的是编码后的路径，在JSP中使用
URLDecoder.decode()解码：<c:set var="decodedPath" value="${URLDecoder.decode(product.imagePath, 'UTF-8')}"/> <img src="${decodedPath}" alt="图片">