如何在JSP中动态检索和显示图像？

Question

I'm working on an E-commerce project , using Java Servlets and JSPs . 我正在使用Java Servlets和JSPs从事E-commerce project 。 However, I got stuck when it came to retrieving product's images from the database to the web page. 但是，在从数据库到网页检索产品的图像时，我陷入了困境。 my data access layer returns product object that contains an array of buffered images. 我的数据访问层返回包含缓冲图像数组的产品对象。 the problem is that I cannot display these images in img tag. 问题是我无法在img标签中显示这些图像。 NOTE: I've tested the data access layer and it works properly. 注意：我已经测试了数据访问层，并且可以正常工作。 Here is the code of product.jsp, where product information should by displayed: 这是product.jsp的代码，应在其中显示产品信息：

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import= "java.util.ArrayList, com.ecommerce.models.*, com.ecommerce.dao.*, org.apache.taglibs.standard.*, java.awt.image.BufferedImage"%> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>

    <link rel="stylesheet" type="text/css" href="styles/normalize.css">
    <link rel="stylesheet" type="text/css" href="styles/product.css">
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link
     href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic'
     rel='stylesheet' type='text/css'>

    <title>Product-name</title>
    </head>
     <body>

     <%
    Product product = (Product) session.getAttribute("product");
    ImageDAO imagedao = new ImageDAO();
    ArrayList<BufferedImage> images = imagedao.getImages(product.getId());

%>
<div class="topnav">
    <a href="#"><img class="cart-icon" src="images/shopping-cart.png"></a>
    <img class="logo" src="images/logo.png" alt="Fashion Station Logo">
</div>

<div class="product-box">
    <div class="img-view">
    <img class="product-img" src="#">
    <img class="product-img" src="#">
    </div>

    <h3>Product Name</h3>


    <div class="quantity buttons_added">
        <label>Quantity</label>
        <input type="button" value="-" class="minus"><input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="" inputmode=""><input type="button" value="+" class="plus">
</div>
    <h4>Price: $99</h4>
    <button class="btn">Add to cart</button>



<div class="description-box">
    <h3>Description</h3>
    <p>Introducing our Blood Sugar Palette from the Love Sick Collection! 

    Featuring 18 striking eyeshadows and pressed-pigments. This palette is serving three luxurious formulas: matte, metallic and pressed glitter. This palette is not for the faint of heart! A luxurious red faux leather finish with a metal clasp.

 SHADE NAMES
 Row 1: Glucose, Sugarcane, Cake Mix, Ouch, Donor, Intravenous
 Row 2: Candy Floss, Tongue Pop, Sweetener, Cavity, O Positive, Root Canal
 Row 3: Prick, Cherry Soda, Fresh Meat, Blood Sugar, Extraction, Coma

 One of a kind. Extreme payoff.
 *VEGAN. CRUELTY-FREE.
  </p>
    </div>
   </body>
   </html>

Answer 1

You could use JQuery when the page loaded to try and get the images rendered. 您可以在页面加载时使用JQuery尝试获取呈现的图像。

I would assign ids to the image tags (say img1 and img2) ie 我会将ID分配给图像标签（例如img1和img2），即

<img id="img1" class="product-img" src="">
<img id="img2" class="product-img" src="">

and then do something like : 然后执行以下操作：

$("#img1").attr("src",images[0]);
$("#img2").attr("src",images[1]);

如何在JSP中动态检索和显示图像？

问题描述

1 个解决方案

解决方案1
0 2018-09-06 10:24:44

如何在JSP中动态检索和显示图像？

问题描述

1 个解决方案

解决方案1 0 2018-09-06 10:24:44

解决方案1
0 2018-09-06 10:24:44