0

I am fetching src of images from DB and trying to put it into the JSP page but only one image is loading and rest 2 are not loading

code:

<%  
    Iterator<product> itr = list.iterator(); 
    while(itr.hasNext())
    { 
      p=itr.next();  
      String price=p.getPrice();
      String img=p.getImg();
      String pname=p.getPname();                       
   %>   
      <script>
        document.getElementById("image").src="<%=img %>";  
      </script>
    <div class="item">
        <img src="" alt="<%=img%>" id="image"/>
         <h2><%=pname%></h2>

        <p>Price: <em>Rs <%=price%></em>
        </p>
        <button class="add-to-cart" type="button">Add to cart</button>
    </div>  
     <% } %>

but I am getting the below output : screenshot of the jsp page

java DB code:

public List<product> getProducts(String brand)
{ 
   List<product> prod=new ArrayList<product>();
  try
  {
   conn = obj.connect();
   String sql="select product.product_name , product.price , product.image_url "
           + "from category , product "
           + "where product.category_id=category.category_id and product.product_brand like 'LG%'";
    cs=conn.createStatement();  
   rs=cs.executeQuery(sql);
     while(rs.next())
     {
         product p=new product();
       p.setPname(rs.getString(1));
       p.setPrice(rs.getString(2));
       p.setImg(rs.getString(3));
       prod.add(p);  
     }

  }
    catch(SQLException e)
    {
        e.printStackTrace();
    }
    catch(Exception k)
    {
        k.printStackTrace();
    }
  return prod;
}

}
amol singh
  • 143
  • 1
  • 12

2 Answers2

0
<%  
  Iterator<product> itr = list.iterator(); 
  while(itr.hasNext())
  { 
    p=itr.next();  
    String price=p.getPrice();
    String img=p.getImg();
    String pname=p.getPname();
%>    
<div class="item">
<img src="<%=img%>" alt="<%=img%>"/>
<h2><%=pname%></h2>

<p>Price: <em>Rs <%=price%></em></p>
<button class="add-to-cart" type="button">Add to cart</button>
</div>
<% } %>  

document.getElementById("image").src="<%=img %>"; is overwriting the first img tag

xrcwrn
  • 5,339
  • 17
  • 68
  • 129
0

i finally found an answer ... it may be a workaround but it still works !!!

<div style="background: url(<%=img%>);"></div>

just added the above in my code .. no need to use the <img> tag

amol singh
  • 143
  • 1
  • 12