图片未出现在 jsp 页面中

Question

当我插入图像时，我使用 Base64 编码：
//编码图像
byte[] byteArray = Base64.encodeBase64(productImage.getBytes());
为了在我的 spring 控制器中获取产品详细信息，我正在获取如下数据：

  @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; 
    }

在我的 jsp 中，我使用 Jstl 来迭代列表数据并显示在 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>

我在 jsp 中尝试了另一种方法来调用控制器，例如
<td> <img id=productImage" name="productImage" src="getProducctImage/'${product.sku}'/>"></td>
它甚至没有调用我的控制器：

@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());
            }
      }

这里的productImage是byte[]类型的，我需要帮助，我错过了哪一步或者我做错了什么

Answer 1

在您的第一种方法中，您可以使用“数据 URI 方案”来显示图像。
如果您的图像数据格式是 jpeg，您的 img 标签将类似于：

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

当你像上面那样使用'data URI scheme'时，你需要将图像数据嵌入到text(html)中。因此，您必须像这样将 base64 编码字符串格式的图像数据设置为 productImageBase64String 字段。

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

在您的另一种方法中，我认为通过更改 <img> 标签可以正常工作：

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

另请参阅
Why use data URI scheme?

Answer 2

@Tomoki 感谢您的宝贵建议，非常感谢您的帮助。我正在使用一种使用 servlet 的不同方法，并在我的 jsp 中进行了如下更改：

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

在 Servlet get 方法中：

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());
        }

    }

图片未出现在 jsp 页面中

Image is not coming in jsp page

java

base64

spring

jsp

spring-mvc