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

【问题标题】：Expression language & data-image - not show image表达语言和数据图像 - 不显示图像
【发布时间】：2018-01-22 19:08:49
【问题描述】：

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

<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？提前感谢您的帮助。

【问题讨论】：

标签： html image thymeleaf el

【解决方案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}">

【讨论】：