Expression language & data-image - not show image - html

Question

I'm using Thymeleaf (Spring Boot project). I have the code:
<div class="single_product_thumbnails">
<ul>
<li class="active"><img th:src="${product.mainImage}" alt="" data-image="${product.mainImage}"/></li>
<li><img th:src="${product.imageSecond}" alt="" data-image="${product.imageSecond}"/></li>
<li><img th:src="${product.imageThird}" alt="" data-image="${product.imageThird}"/></li>
</ul>
</div>
Th:src load image thumbnail in left panel (EL code works). Data-image load image on the center of screen - code not work i.e. if I use data-image="http://image.png" or data-image="images/single_2.jpg" it works but my EL expression doesn't work.
Original code (fully works - from https://colorlib.com/etc/coloshop/single.html):
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" data-image="images/single_1.jpg"></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" data-image="images/single_2.jpg"></li>
<li><img src="images/single_3_thumb.jpg" alt="" data-image="images/single_3.jpg"></li>
</ul>
</div>
How to use EL properly in this data-image example? Thank you in advance for your help.

Answer 1

Thymeleaf only evaluates attributes that are prefixed with th:. You should be able to use:
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" th:data-image="${product.mainImage}" /></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" th:data-image="${product.imageSecond}" /></li>
<li><img src="images/single_3_thumb.jpg" alt="" th:data-image="${product.imageThird}" /></li>
</ul>
</div>
The other option would be to use th:attr, to dynamically generate the attribute you want. Like this:
<img src="images/single_1_thumb.jpg" alt="" th:attr="data-image=${product.mainImage}">