Image is not coming in jsp page

Question

When I Inserted image I encoded using Base64:
//encode image
byte[] byteArray = Base64.encodeBase64(productImage.getBytes());
And to get product details in my spring controller I am fetching data like:

  @GetMapping(value = "/searchNewAddedProducts")
    public ModelAndView getAllNewAddedProducts(HttpServletRequest request) {
        String msg=null;
        List<ProductWithBLOBs> newList=new ArrayList<>();
        List<ProductWithBLOBs> newProductList = productService.fetchNewAddedProduct();
        if(!newProductList.isEmpty()) {
            for(ProductWithBLOBs prod:newProductList) {
                prod.setProductImage(Base64.decodeBase64(prod.getProductImage()));
                newList.add(prod);
                System.out.println("image:"+prod.getProductImage());
            }
            request.setAttribute("newProductList", newList);
        }
      msg="some message";
       ModelAndView mav = new ModelAndView("admin/viewProduct");
        mav.addObject("result", msg);    
        return mav; 
    }

And in my jsp i am using Jstl to iterate list data and display in a table:

<c:forEach items="${newProductList}" var="product">
    <tr>
      <td><c:out value="${product.sku}"/></td>
      <td><c:out value="${product.productName}"/></td>
      <td><c:out value="${product.price}"/></td>
      <td><img src="${product.productImage}"/></td>
      <td><c:out value="${product.productDescription}"/></td>
    </tr>
  </c:forEach>

I tried one another approach in jsp to call controller like
<td> <img id=productImage" name="productImage" src="getProducctImage/'${product.sku}'/>"></td>
And it's not even calling my controller:

@GetMapping("/getProducctImage/{sku}")
      public void getProductImage(HttpServletResponse response,@RequestParam("sku") String sku) 
              throws  IOException{
            response.setContentType("image/*");
            byte[] img = productService.fetchProductImageBySku(sku);
            if(img!=null) {
                img=Base64.decodeBase64(img);
                InputStream inputStream = new ByteArrayInputStream(img);
                IOUtils.copy(inputStream, response.getOutputStream());
            }
      }

Here productImage is of byte[] type, I need help that which step I am missing or what wrong I am doing

score 0 · Answer 1 · answered Jun 13 '20 at 15:37

In your first approach, you can display the image by using 'data URI scheme'.
If the format of your image data is jpeg, your img tag will be something like:

<img src="data:image/jpg;base64,${product.productImageBase64String}"/>

When you use 'data URI scheme' like above, you need to embed the image data into text(html) . So you have to set the the image data in base64-encoded string format to the productImageBase64String field like this.

// 'prod.productImage' is a base64-encoded byte array.
prod.setProductImageBase64String(new String(prod.getProductImage(), "UTF-8"));

In your one another approach, I think it will work fine by changing the <img> tag like:

<img id="productImage" name="productImage" src="/getProducctImage/${product.sku}"/>

See Also
Why use data URI scheme?

score 0 · Accepted Answer · answered Jun 14 '20 at 07:50

@Tomoki thanks for your valuable suggestion I greatly appreciate your help. I am using a different approach using servlet and in my jsp made changes like:

<td> <img width="100" height="100" src="${request.contextPath}displayProductImage?sku=${product.sku}"/></td>

In Servlet get method:

protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            String sku = request.getParameter("sku");
            String imageAsString = productService.fetchProductImageBySku(sku);
            if (imageAsString == null) {
                return;
            } else {
                byte[] decodedImage = Base64.decodeBase64(imageAsString);
                response.reset();
                response.setContentType("image/.*");
                OutputStream out = response.getOutputStream();
                out.write(decodedImage);
                out.close();
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }

    }

Image is not coming in jsp page

2 Answers2