CODEWITHSUNDEEP
javajspservletsweb-applications
Salma
Salma

Reputation: 26

How to retrieve and display images dynamically in a JSP?

I'm working on an E-commerce project, using Java Servlets and JSPs. 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. 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: 

    <%@ 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="[email protected]" 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>

Upvotes: 0

Views: 1104

Answers (1)

mkane
mkane

Reputation: 920

You could use JQuery when the page loaded to try and get the images rendered.

I would assign ids to the image tags (say img1 and img2) i.e.

<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]);

Upvotes: 1

Related Questions