Javascript 羽毛光灯盒与弹簧和百里香不能打开盒子中的图像

我正在用Thymeleaf构建一个基于Spring的web应用程序，并使用Featherlight lightbox/gallery组合在首页上显示图像的砖石布局。图像以字节数组的形式存储在数据库中，我只需使用基于内容id的HttpServletResponse在控制器中调用它们。html代码中的响应url类似于“host/gallery/image/2”，对于Featherlight gallery组件来说效果很好

它可以很好地显示图像，但问题是当单击每个图像以将其显示在灯箱中时。只要我使用硬编码链接到某个物理位置的图像，一切都正常。但是对于动态显示的图像，我在lightbox中得到的只是实际的字节码，而不是图像

@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());
    }

我该怎么做才能使羽毛灯灯箱理解它是一个图像

<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如何创建实际的灯箱对象，我是否遗漏了什么

---

编辑：我也尝试了data featherlight type=“image”选项，但没有效果。

好的，当我尝试通过JQuery实例化时会发生这种情况

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

我们尝试这样做是为了在测试时在css样式之间切换。我一接到电话，一切都很顺利