Time for action – adding images to the product detail page

Let's extend this technique to show product images in our product listing page and in the product detail page. Perform the following steps:

1. Open products.jsp; you can find products.jsp under the /src/main/webapp/WEB-INF/views/ directory in your project. Now, add the following <img> tag after the <div class="thumbnail"> tag:

   <img src="<c:url value="/resource/images/${product.productId}.png"></c:url>" alt="image"  style = "width:100%"/>

2. Similarly, open product.jsp and add the following <img> tag after the <div class="row"> tag:

   <div class="col-md-5">
     <img src="<c:url value="/resource/images/${product.productId}.png"></c:url>" alt="image"  style = "width:100%"/>
   </div>

3. Now, run our application and enter http://localhost:8080/webstore/products. You will be able to see the product list page with every product that has a product image, as shown in the following figure...