Unable to display byte[] image in thymleaf

Question

I am unable to display byte image in thymleaf which is come from database as blob then convert to byte[], when I fetch image from database that query successfully implemented, but it is unable to display in thymleaf here below is code

DaoImpl code this function in daoimpl for retriving image from database

in this fuction by using query blob is selected from database then blob is cast in byte and byte directly send to controller

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

controller in controller we recieve byte array and encoded in base64 and send to thymleaf page

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

}

Front end with thymleaf here we recieve object of pic and display using thymleaf but pic is not display

    <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>

Possible duplicate of [How to display Base64 images in HTML?](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) — holmis83, Jul 20 '17 at 18:34

Isaac Riley · Answer 1 · 2018-12-12T21:32:45.917

Assuming that you sent a byte[] to be stored in your DB ....

Add the Base64 encoded string to your model map:

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

In your thymeleaf snippet:

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

Thymeleaf's template engine will facilitate converting your Base64 string into an image.

score 2 · Answer 2 · answered Jul 20 '17 at 17:35

2

You can use below code

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

answered Jul 20 '17 at 17:35

Akash

587
5
12

score 1 · Answer 3 · answered Sep 21 '18 at 09:57

Convert the blob into bytes and then convert that bytes into Base64String using Base64.getEncoder().encodeToString(byte[] image); gives Base64String which needs to be set in Context as variable and add a key using context.setVariable(key, Base64String variable); and then pass it in Template Engine for processing and add this line in Thymeleaf html page <img th:src="@{'data:image/png;base64,' + ${Base64String's key} }" />

This approach works for adding Images, Qr Codes and BarCodes etc on the condition that they can be converted to byte[] for further processing.

Unable to display byte[] image in thymleaf

3 Answers3