How to display jpg from db web page? - thymeleaf

Question

I have got table and display datas from database (mysql). I use thymeleaf. All fields are ok but sb.cover doesnt show jpg (blob column in my database). Have you got any ideas how to put jpg in web page using thymeleaf? Thanks
<tr th:each="sb, poz : ${product}">
<td th:text="${poz.count}">1</td>
<td th:icon="${sb.cover}"></td>
<td th:text="${sb.title}"></td>
<td th:text="${sb.price}"></td>
<td ><b><a th:href="#{/details}">DETAILS</a></b></td>
<td ><b><a th:href="#{/cart}">ADD TO CART</a></b></td>
</tr>

Answer 1

It's worked for me:
<img class="info" th:attr="src=#{${image}}" />
where 'image' is base64 image:
image = "data:image/png;base64,R0lGODlhlgCWAMQAAPz.........
in Spring Java Controller:
#RequestMapping(value = "/get_goods_detail", method = RequestMethod.GET)
public String getGoodsDetail(#RequestParam(value = "itemid") final int itemid,
ModelMap model) {
// get image
String image = "data:image/png;base64,R0lGODlhlgCWAMQAAPz8/N3d3eX.../big image
model.addAttribute("image", image);
return "goods_detail"; // return name of html view with thymeleaf
}

Answer 2

I am not sure this will help you...
<tr th:each="sb, poz : ${product}">
<td th:text="${poz.count}">1</td>
<td><img th:attr="src=#{${sb.cover}} , title=#{background}, alt=#{background}" style="width: 150px; height: 150px;" /></td>
<td th:text="${sb.title}"></td>
<td th:text="${sb.price}"></td>
<td ><b><a th:href="#{/details}">DETAILS</a></b></td>
<td ><b><a th:href="#{/cart}">ADD TO CART</a></b></td>
</tr>

Answer 3

You can do some thing like this:-
<img th:src="#{'data:image/jpeg;base64,'+${sb.encodedString}}" />
where encodedString is image's byte[] data converted to base64 encoded string.
This is basic html actually. Check this question: Is it possible to put binary image data into html markup and then get the image displayed as usual in any browser?
Hope that helps

Answer 4

Alternatively, you can display image like below:
<img th:if="*{photo != null}" th:src="#{'data:image/jpg;base64,' + *{T(org.springframework.util.Base64Utils).encodeToString(photo)}}"/>

Answer 5

this method that converts the bytearray to base64 String so you can convert your product cover to base64 sring.
you need to add in the product class :
public String generateBase64Image()
{
return Base64.encodeBase64String(this.getCover());
}
in the web page you need to call the metho generateBase64Image() in in your web page :
<img th:src="#{'data:image/jpeg;base64,'+${product.generateBase64Image()}}" />