<picture> tag support

[akhost]

I am trying to add support for webp image formats with jpg fallbacks. When I write my listener like this the lightbox works as intended:

window.addEventListener('load', (event) => {
    document.querySelectorAll('.modal').forEach(image => {
        image.addEventListener('click', e => {
            basicLightbox.create(`
                <img src="` + image.getAttribute('data-image') + `.jpg">
            `).show();
        });
    });
});

However, when I write my listener like this, the lightbox does not close when I click on the image, only when I click on the background, making the lightbox difficult to close:

window.addEventListener('load', (event) => {
    document.querySelectorAll('.modal').forEach(image => {
        image.addEventListener('click', e => {
            basicLightbox.create(`

                <picture>
                    <source src="` + image.getAttribute('data-image') + `.webp" type="image/webp" srcset="
                        ` + image.getAttribute('data-image') + `.webp
                    ">
                    <img src="` + image.getAttribute('data-image') + `.jpg" data-image="{{image.path}}" srcset="
                        ` + image.getAttribute('data-image') + `.jpg
                    ">
                </picture>
            `).show();
        });
    });
});

I imagine this has something to do with the <picture> tag. Any thoughts on why this would be happening? Thanks

[akhost]

Ah, I see #35, but it does not appear that this solved my issue, as it is still happening? Thanks