Javascript 如何显示画廊的第一张图片？

我有一个图像容器，当使用Thymeleaf呈现框架请求页面时，使用特定目录中可用的图像（因此图像的数量是可变的）填充图像：

<div id="lightgallery">
    <a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>

在执行此操作时，所有图像都显示在彼此下方的页面上（而我只希望将第一个图像显示为占位符）。当我点击其中一个时，灯光库将打开，其中的图像为缩略图

我现在想隐藏除第一张图片以外的所有图片，第一张图片将是画廊的占位符。单击它将打开库，其中占位符图像将成为库的第一个图像。有点像这样：

<div id="lightgallery">
    <a><img src="first.png"></a>
    <a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>

---

您可以使用属性

${i.first}

来判断它是否是第一个图像。我会这样做：

<div id="lightgallery">
    <a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
    <a th:href="${image}"
        style="display: none;"
        th:each="image, i: ${content.images}"
        th:unless="${i.first}"><img th:src="${image}" /></a>
</div>

---

通过将第一个图像与循环一起渲染，可以使其更干净。考虑声明一个CSS类“隐藏”用于显示：没有，并使用它为第二个图像前进

<div id="lightgallery">
    <a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
        <img th:src="${image}">
    </a>
</div>