无法在 thymeleaf 中显示 byte[] 图像答案

【问题标题】：Unable to display byte[] image in thymleaf无法在 thymeleaf 中显示 byte[] 图像
【发布时间】：2017-12-26 13:11:35
【问题描述】：

当我从数据库中获取查询成功实现的图像时，我无法在 thymleaf 中显示来自数据库的字节图像作为 blob 然后转换为字节 []，但它无法在 thymleaf 中显示，下面是代码

DaoImpl 代码 daoimpl 中用于从数据库中检索图像的函数

在这个功能中，使用查询从数据库中选择 blob，然后将 blob 转换为字节并将字节直接发送到控制器

@Override
public byte[] stockProductMenData() 
{
    Session session = getSession();

    byte[] Imagebytes = null;
    Query query = session.createQuery("select sp.stockProductPic "
            + "from StockType st,StockProduct sp"
            + " where st.stockTypeId=sp.stockTypeId and st.stockTypeName = :stockTypeName");
    query.setParameter("stockTypeName","MEN");



     List<Blob> list = query.list();
     System.out.println("List size :"+list.size()); 

     Iterator<Blob> itr = list.iterator();

      while(itr.hasNext())
      {  
         Blob blob = itr.next();
         try {
            Imagebytes =blob.getBytes(1,(int) blob.length());
            System.out.println("dddddd"+Imagebytes);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            System.out.println("eeeeeee"+e);
        }
      }

控制器 在控制器中，我们接收字节数组并以 base64 编码并发送到 thymleaf 页面

@RequestMapping(value = "/mens" , method = RequestMethod.GET)
public ModelAndView custMen()
{
    ModelAndView modelAndView =new ModelAndView();

    byte[] picContent = customerDao.stockProductMenData();
    byte[] encoded = Base64.getEncoder().encode(picContent);
    System.out.println("ssssssssss"+picContent);



                modelAndView.addObject("pic",encoded);
                modelAndView.setViewName("mens");
                return modelAndView;

}

带有百里香叶的前端 在这里我们收到图片的对象并使用 thymleaf 显示，但图片不显示

    <a href="mens_single.html">
    <div class="cbp-pgitem a3ls">
      <div class="cbp-pgitem-flip">
                            <img alt="Image"  th:field="${pic}" width="250" height="250"/>


   </div>
     </div>

【问题讨论】：

How to display Base64 images in HTML?的可能重复

标签： java mysql spring hibernate thymeleaf

【解决方案1】：

假设您发送了一个 byte[] 以存储在您的数据库中 ....

将 Base64 编码字符串添加到您的模型映射：

//I'm using a model here but the concept is the same
 model.addAttribute("pic",Base64.getEncoder.encodeToString(*your_blob*));

在你的 thymeleaf sn-p 中：

<img th:src="${pic} == null ? _ : @{'data:image/png;base64,'+${pic}}">

Thymeleaf 的模板引擎将有助于将您的 Base64 字符串转换为图像。

【讨论】：

【解决方案2】：

你可以使用下面的代码

Blob imageBlob = resultSet.getBlob(yourBlobColumnIndex);
byte[] imageBytes = imageBlob.getBytes(i, (int) imageBlob.length());

【讨论】：

【解决方案3】：

将 blob 转换为字节，然后将字节转换为 Base64String 使用 Base64.getEncoder().encodeToString(byte[] image); 给出 Base64String 需要在 Context 中设置为变量并使用 context.setVariable(key, Base64String variable); 添加一个键，然后将其传递给模板引擎进行处理并在 Thymeleaf html 页面中添加此行 <img th:src="@{'data:image/png;base64,' + ${Base64String's key} }" />

这种方法适用于添加图像、二维码和条形码等，条件是它们可以转换为 byte[] 以进行进一步处理。

【讨论】：