CODEWITHSUNDEEP
thymeleaf
user978758
user978758

Reputation: 599

How to display jpg from db web page?

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>

Upvotes: 5

Views: 10142

Answers (5)

youssef
youssef

Reputation: 109

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()}}"  />

Upvotes: -1

user3825510
user3825510

Reputation: 71

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
}

Upvotes: 6

Mykhailo Lytvyn
Mykhailo Lytvyn

Reputation: 191

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)}}"/>

Upvotes: 2

Nikhil Mahajan
Nikhil Mahajan

Reputation: 523

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

Upvotes: 2

Prasanth A R
Prasanth A R

Reputation: 4174

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>

Upvotes: 2

Related Questions