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

Question

I am building a web app based on Spring with Thymeleaf and I am using Featherlight lightbox/gallery combination to show a masonry layout of images on the front page. The images are stored in a database as byte arrays and I simply recall them in my controller using a HttpServletResponse response based on the id of the content. The response url in the html code is something like "host/gallery/image/2" which works fine for the Featherlight gallery component.

It lays out the images just fine but the problem is when clicking on each image to display it in a lightbox. As long as I was using hard coded links to an image in some physical location all worked fine. But with dynamically displayed images all I get back in the lightbox is the actual byte code and not an image.

What can I do to make Featherlight light box to understand it's an image?

<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>

The tag works fine and Featherlight builds a nice gallery layout of the images but the href-link just results in a box opening with huge amount of byte coden and not an image.

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

And the simple controller for the image response...

Is there something I missed regarding how Featherlight creates the actual light box object?

EDIT: I did also try with the data-featherlight-type="image" option but to no avail.

Answer 1

OK, this happens when I try to instantiate via JQuery;

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

Was trying this in order to simply switch between your css styles while testing. As soon as I take the call out, all works well.