How to retrieve and display images dynamically in a JSP?
Question
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="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>
1 answers
solution1
0 2018-09-06 10:24:44
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) ie
<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]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.