Hiển thị BLOB (hình ảnh) qua JSP

Question

Tôi có mã để hiển thị biểu đồ o nhân viên.

Dữ liệu (tên, điện thoại, ảnh, vv) được lưu trữ trong SQLServer và được hiển thị qua JSP. Hiển thị dữ liệu là ok, ngoại trừ hình ảnh .jpg (được lưu trữ trong IMAGE = BLOB cột).

Nhân tiện, tôi đã có hình ảnh được hiển thị (xem mã bên dưới), nhưng tôi không biết cách đặt nó trong khu vực được xác định trong một .css (xem mã bên dưới), vì hình ảnh có được thông qua resultSet được tải trong toàn bộ trang trong trình duyệt.

Có ai biết cách tôi có thể 'khung' hình ảnh không?

<% 
Connection con = FactoryConnection_SQL_SERVER.getConnection("empCHART"); 
Statement stSuper = con.createStatement(); 
Statement stSetor = con.createStatement(); 

Blob image = null; 
byte[] imgData = null; 

ResultSet rsSuper = stSuper.executeQuery("SELECT * FROM funChart WHERE dept = 'myDept'"); 

if (rsSuper.next()) { 
image = rsSuper.getBlob(12); 
imgData = image.getBytes(1, (int) image.length()); 
response.setContentType("image/gif"); 
OutputStream o = response.getOutputStream(); 
//o.write(imgData); // even here we got the same as below. 
//o.flush(); 
//o.close(); 

--[...] 

<table style="margin: 0px; margin-top: 15px;"> 
<tr> 
<td id="photo"> 
<img title="<%=rsSuper.getString("empName").trim()%>" src="<%= o.wite(imageData); o.flush(); o.close(); %>" /> 
</td> 
</td> 

<td id="empData"> 
<h3><%=rsSuper.getString("empName")%></h3> 
<p><%=rsSuper.getString("Position")%></p> 
<p>Id:<br/><%=rsSuper.getString("id")%></p> 
<p>Phone:<br/><%=rsSuper.getString("Phone")%></p> 
<p>E-Mail:<br/><%=rsSuper.getString("Email")%></p> 
</td> 
</table> 

Và đây là đoạn phải khung ảnh:

#photo 
{ 
    padding: 0px; 
    vertical-align: middle; 
    text-align: center; 
    width: 170px; 
    height: 220px; 
} 

Cảm ơn trước!

Answer 1

Bạn đang mắc một số sai lầm cơ bản ở đây. Các <img src> phải trỏ đến một URL, không chứa nội dung nhị phân của hình ảnh. Không được đặt loại nội dung của trang JSP thành image/gif. Nó phải được giữ mặc định là text/html. Nó không phải là sự thật rằng các máy chủ web có nghĩa vụ phải bao gồm các hình ảnh cụ thể trong kết quả HTML như bạn có vẻ mong đợi. Đó là webbrowser tải xuống các hình ảnh riêng lẻ dựa trên URL được tìm thấy trong thuộc tính src và sau đó trình bày chúng cho phù hợp.

Dễ nhất là tạo một servlet riêng biệt truyền hình ảnh từ DB đến phần nội dung phản hồi. Bạn có thể xác định duy nhất hình ảnh theo thông số yêu cầu hoặc thông tin đường dẫn. Dưới đây là một ví dụ trong đó sử dụng một tham số yêu cầu cho rằng:

<img src="imageServlet?id=<%=rsSuper.getString("id")%>" /> 

Phương pháp doGet() nên sau đó cơ bản thực hiện công việc này:

String id = request.getParameter("id"); 

// ... 

InputStream input = resultSet.getBinaryStream("imageColumnName"); 
OutputStream output = response.getOutputStream(); 
response.setContentType("image/gif"); 
// Now write input to output the usual way. 

---

Không liên quan cho vấn đề cụ thể, sử dụng scriptlets theo cách này chính thức được khuyến khích mạnh mẽ kể từ một thập kỷ. Có lẽ bạn đã đọc những cuốn sách/hướng dẫn hoàn toàn lỗi thời hoặc đang duy trì một ứng dụng web JSP cổ đại. Đối với một số hiểu biết, xem thêm các câu trả lời của câu hỏi sau đây đối với một số gợi ý:

• How to avoid Java code in JSP files?
• Show JDBC ResultSet in HTML in JSP page using MVC and DAO pattern
• How to retrieve and display images from a database in a JSP page?

Answer 2

Nếu bạn muốn hiển thị hình ảnh thông qua một thẻ HTML, bạn sẽ phải trỏ hình ảnh đến tài nguyên trong máy chủ tải hình ảnh, để trình duyệt của khách hàng có thể tải nó. Bằng cách đó, bạn có thể tạo kiểu cho thẻ <img />.

Để thực hiện việc này, hầu hết mọi người viết ImageServlet tải dữ liệu nhị phân của hình ảnh và viết <img src = "/source/to/someImageServlet?id=<%=rsSuper.getString("id")%>" id = "photo"/>.

Answer 3

Connection con = new DBConnection().getConnection(); 
     String sql = " SELECT * FROM tea "; 
     PreparedStatement ps = con.prepareStatement(sql); 
     ResultSet rs = ps.executeQuery(); 

     while (rs.next()) { 
      byte[] imgData = rs.getBytes("img"); // blob field 
      request.setAttribute("rvi", "Ravinath"); 
      rs.getString("teatitle"); 

      String encode = Base64.getEncoder().encodeToString(imgData); 
      request.setAttribute("imgBase", encode); 
     } 

sau đó sử dụng JSTL cho chiết xuất các thuộc tính trên trang jsp

<img src="data:image/jpeg;base64,${imgBase}" />