在 Intersection observer 中换行元素

问：

我有一个带有图像的页面，如下所示：

<img class="lazy" src="" data-src="http://localhost:8000/image1" alt='' />
<img class="lazy" src="" data-src="http://localhost:8000/image2" alt='' />

只有带有 data-src 和空 src 的图像用于延迟加载。

我的任务不仅是延迟加载这些图像，而且还将它们包装在图片元素中并添加各种来源。 所以，我需要得到类似的东西：

<picture>
  <source>
  <source>
  <img>
</picture>

JS代码：

document.addEventListener("DOMContentLoaded", function () {
            const sizes = [320, 768, 1024, 1920];

            const buildSrcset = (sizes, src, format = 'jpeg') => sizes.map(size => `${src}?format=${format}&width=${size} ${size}w`).join(', ');
            const buildSizes = (sizes) => sizes.map(size => `(max-width: ${size}px) ${size}px`).join(', ');

            const wrapWithPicture = (img) => {
                const picture = document.createElement('picture');
                const webpSource = document.createElement('source');
                webpSource.setAttribute('srcset', buildSrcset(sizes, img.dataset.src, 'webp'));
                webpSource.setAttribute('sizes', buildSizes(sizes));
                webpSource.setAttribute('type', 'image/webp');
                const jpegSource = document.createElement('source');
                jpegSource.setAttribute('srcset', buildSrcset(sizes, img.dataset.src));
                jpegSource.setAttribute('sizes', buildSizes(sizes));
                jpegSource.setAttribute('type', 'image/jpeg');
                picture.append(webpSource, jpegSource, img);
                return picture;
            }

            const images = document.querySelectorAll('img.lazy');
            const pictures = [...images].map(img => wrapWithPicture(img));

            const lazyImageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        let img = entry.target;
                        img.src = img.dataset.src;
                        img.classList.remove("lazy");
                        const picture = wrapWithPicture(img);
                        img.replaceWith(picture);
                        img.unobserve(img);
                    }
                });
            });

            images.forEach((img) => {
                lazyImageObserver.observe(img);
            });
        });

在这里，我试图用在观察器函数中创建的图片替换原始图像，但它似乎不起作用。 我可以编写脚本，只用图片包装图像，它工作正常，或者只是延迟加载图像。但我不能让他们一起工作。