表达语言和数据图像 - 不显示图像

Question

我正在使用 Thymeleaf（Spring 引导项目）。我有代码：

<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 在左侧面板中加载图像缩略图（EL 代码有效）。屏幕中央的数据图像加载图像 - 代码不起作用，即如果我使用 data-image="http://image.png" 或 data-image="images/single_2.jpg" 它有效但我的 EL 表达式不起作用。

原始代码（完全有效 - 来自 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>

如何在这个数据图像示例中正确使用EL？预先感谢您的帮助。

Answer 1

Thymeleaf 仅评估前缀为 th: 的属性。您应该能够使用：

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

另一种选择是使用 th:attr 来动态生成您想要的属性。像这样：

<img src="images/single_1_thumb.jpg" alt="" th:attr="data-image=${product.mainImage}">

表达语言和数据图像 - 不显示图像

Expression language & data-image - not show image

html

image

el

thymeleaf