我有一个Razor应用程序，其中Lightbox 2以前用于应用程序中的图片库。现在，我想做一个改变，使用PhotoSwipe代替。我开始按照官方网站上的文档：https://photoswipe.com/getting-started/。我的问题是，当我点击任何缩略图时，完整的图像都会在一个新的标签页中打开，而不是在PhotoSwipe的图库组件中打开图像。文档看起来是一个相当简单的设置，但在这种情况下，我不确定我还错过了什么。提前感谢您的帮助。
照片滑动初始化（init-photoswipe. js）：

import PhotoSwipeLightbox from '../photoswipe-dist/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
    gallery: '#gallery--custom-html-markup',
    children: 'a',
    pswpModule: () => import('../photoswipe-dist/photoswipe.esm.js')
});
lightbox.init();

Razor组件代码片段：

<ContentTemplate>
        @if (IsLoading)
        {
            <PlaceholderLoading />
        }
        else
        {
            <div class="card-body pb-1">
                <h5 class="card-title pr-2">
                    @(Observation.Question ?? Observation.Name)
                </h5>
            </div>

            @if (ThumbnailUrl is PhotoNotTaken or ImageCannotBeDisplayed)
            {
                <img class="card-img-bottom" src="@ThumbnailUrl" alt="No photo available" />
            }
            else
            {
                <div class="pswp-gallery" id="gallery--custom-html-markup">
                    <a href="@PhotoUrl" data-pswp-width="1669" data-pswp-height="2500" target="_blank">
                        <img class="card-img-bottom" src="@ThumbnailUrl" alt="@(Observation.Question ?? Observation.Name)" />
                    </a>
                </div>
            }
        }
    </ContentTemplate>

_Host.cshtml文件的代码段：

<!-- PhotoSwipe CSS -->
    <link rel="stylesheet" href="~/_content/ProjectComponents/js/photoswipe-dist/photoswipe.css">
<!-- PhotoSwipe initialization -->
    <script src="~/_content/ProjectComponents/js/custom/init-photoswipe.js" type="module"></script>

注意：_Host.cshtml文件在实际网站的单独项目中。PhotoSwipe初始化和Razor组件代码在共享组件的另一个项目中。这两个项目是同一解决方案的一部分，因此不确定这是否会导致PhotoSwipe出现一些问题。