图像没有进入 jsp 页面答案

【问题标题】：Image is not coming in jsp page图像没有进入 jsp 页面
【发布时间】：2020-06-13 12:54:50
【问题描述】：

当我插入图像时，我使用 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 来迭代列表数据并显示在表格中：

<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[] 类型的，我需要帮助我错过了哪一步或我做错了什么

【问题讨论】：

标签： java spring spring-mvc jsp base64

【解决方案1】：

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

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

当您像上面那样使用“数据 URI 方案”时，您需要将图像数据嵌入到 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?

【讨论】：

【解决方案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());
        }

    }

【讨论】：