javascript - 内联库未显示，“未捕获的语法错误：无法在模块外使用 import 语句”即使我添加了 type="module"

Question

未捕获的语法错误：无法在模块外使用 import 语句。

我已经尝试添加 type="module"。

<div class="d-flex justify-content-center">
            <div id="inline-gallery-container" class="inline-gallery-container"></div>
          </div>

          <script>
            import lgZoom from "https://cdn.skypack.dev/lightgallery@2.0.0-beta.3/plugins/zoom";
            import lgThumbnail from "https://cdn.skypack.dev/lightgallery@2.0.0-beta.3/plugins/thumbnail";


            const $lgContainer = document.getElementById("inline-gallery-container");
            const inlineGallery = lightGallery($lgContainer, {
            container: $lgContainer,
            dynamic: true,
            hash: false,
            closable: false,
            showMaximizeIcon: true,
            appendSubHtmlTo: ".lg-item",
            slideDelay: 400,
            plugins: [lgZoom, lgThumbnail],
            dynamicEl: [
                  {
                      src: 'hexagon.jpg',
                      thumb: 'hexagon.jpg',
                      subHtml: `<div class="lightGallery-captions">
                          <h4>Caption 1</h4>
                          <p>Description of the slide 1</p>
                      </div>`,
                  },
                  {
                      src: 'landscape.jpg',
                      thumb: 'lanscape.jpg',
                      subHtml: `<div class="lightGallery-captions">
                          <h4>Caption 2</h4>
                          <p>Description of the slide 2</p>
                      </div>`,
                  },
      
                  {
                      src: 'hillsong-united-aftermath.jpg',
                      thumb: 'hillsong-united-aftermath.jpg',
                      subHtml: `<div class="lightGallery-captions">
                          <h4>Caption 2</h4>
                          <p>Description of the slide 2</p>
                      </div>`,
                  },
      
              ],
      
            thumbWidth: 60,
            thumbHeight: "40px",
            thumbMargin: 2
            });
      
            setTimeout(() => {
            inlineGallery.openGallery();
            }, 200);
      
        </script>
            
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" 
            integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" 
            integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
          

..................................................... ..................................................... ..................................................... ................................................“新手“………………………………………………………………………………………………………………………………………………………………………… ..................................................... ..................................................... ..................................................... ...................................

标签： javascripthtmllightgallery