在目标网页上放置一张图片

Question

我有一个图库页面，其中显示了各种包含宠物的卡片，每张卡片的内部都是一则完整的帖子，其中包含多张图片和有关特定宠物的详细信息。我的问题是，在画廊页面上的小卡片所在的位置，我希望有一个缩略图可以显示完整卡片中的一张图片，以便用户提前知道宠物的样子，而不是强迫他们他们实际上要打开卡来查看详细信息和图像。

                <div class="card" data-aos="flip-left" data-aos-duration="1200">
                      <!-- spot where image should go -->
                    <h1><%=post.name %></h1>
                    <span><%=post.fee %></span>
                    <span><%=post.description %></span>
                    <span><%= post.location%></span>  
                    <div><a href="/gallery/pet/<%=post.id %>">View More</a></div>
                </div>
            </div>

下面是卡片的显示页面中的代码，其中包含完整的图像数组：

    <% post.images.forEach(function(image) { %>
        <img src="<%=image.url %>" alt="Turtle Image" >

    <% }) %>