Featherlight 灯箱与 Spring 和 Thymeleaf 一起无法在框中打开图像

Question

我正在基于 Spring 和 Thymeleaf 构建网络应用程序，我正在使用 Featherlight lightbox/gallery 组合在首页上显示图像的砖石布局。这些图像作为字节数组存储在数据库中，我只是使用基于内容 ID 的 HttpServletResponse 响应在我的控制器中调用它们。 html 代码中的响应 url 类似于“host/gallery/image/2”，它适用于 Featherlight 画廊组件。

它可以很好地布置图像，但问题是单击每个图像以将其显示在灯箱中时出现问题。只要我对某个物理位置的图像使用硬编码 links 就可以正常工作。但是对于动态显示的图像，我在灯箱中得到的只是实际的字节码，而不是图像。

我该怎么做才能让 Featherlight 灯箱了解它是一张图片？

<div id="macy-container" data-featherlight-gallery data-featherlight-filter="a" data-featherlight-type="image">
    <div class="masonry-content" th:each="content : ${contentList}">
        <div class="macy-item">
            <a th:href="@{'/gallery/image/' + ${content.id}}" class="gallery2">
                <img th:src="@{'/gallery/image/' + ${content.id}}" width="225" class="macy-image" alt="First image"/>
            </a>
        </div>
    </div>
    </div>

该标签工作正常，Featherlight 构建了一个漂亮的图像画廊布局，但 href-link 只会导致打开一个包含大量字节代码的框，而不是图像。

@GetMapping("/gallery/image/{id}")
    public void showGalleryImage(@PathVariable Long id, HttpServletResponse response) throws IOException {

        response.setContentType("image/jpeg");

        Content content = contentService.findById(id);

        InputStream is = new ByteArrayInputStream(content.getImageFile());
        IOUtils.copy(is, response.getOutputStream());
    }

以及图像响应的简单控制器...

关于 Featherlight 如何创建实际的灯箱对象，我是否遗漏了什么？

编辑：我也尝试过使用 data-featherlight-type="image" 选项，但无济于事。

Answer 1

好的，当我尝试通过 JQuery;

实例化时会发生这种情况

$('.gallery2').featherlightGallery({ variant: 'featherlight-gallery2' });

尝试此操作是为了在测试时简单地在 css 样式之间切换。一接电话，一切正常

Featherlight 灯箱与 Spring 和 Thymeleaf 一起无法在框中打开图像

Featherlight lighbox together with Spring and Thymeleaf does not open image in box

javascript

spring-mvc

thymeleaf

featherlight.js