Lightgallery无法渲染图片，点击仅显示黑色覆盖层问题求助

问题现象 #

需要一款具备缩略图、点击图片打开、支持标题的图库组件，选用lightGallery.js后，点击图片仅显示黑色覆盖层，无法渲染出图片。相关代码如下：

头部引入的CSS #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-thumbnail.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-autoplay.min.css">

页面中的图库结构 #

<div class="gallery1" id="gallery1">
    <a href="assets/images/events/IMG_2464.JPG" 
      >
      <img src="assets/images/events/IMG_2475.JPG" alt="">
    </a>

    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
    <a href="assets/images/events/IMG_4713.JPG">
      <img src="assets/images/events/IMG_4713.JPG" alt="">
    </a>
</div>

底部引入的JS及初始化代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/share/lg-share.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/autoplay/lg-autoplay.min.js"></script>
<script>
  let gallery = document.getElementById("gallery1");
  lightGallery(gallery, {        
    controls: false,
    speed: 200,
    download: false,
    counter: false,
    plugins: [ lgThumbnail, lgAutoplay],
  })
</script>

排查与解决步骤 #

1. 验证图片路径正确性 #

这是最常见的原因：

• 直接在浏览器地址栏输入图片的完整URL（比如http://你的站点域名/assets/images/events/IMG_2464.JPG），检查图片是否能正常加载。
• 确认图片文件确实存放在对应路径下，注意区分大小写（比如.jpg和.JPG在Linux服务器上是不同的）。
• 如果HTML文件不在站点根目录，需调整相对路径，比如HTML在pages/目录下，路径应改为../assets/images/events/IMG_2464.JPG。

2. 修复HTML语法错误 #

第一个<a>标签存在多余的换行和空格，可能导致lightGallery解析异常，修正为：

<a href="assets/images/events/IMG_2464.JPG">
  <img src="assets/images/events/IMG_2475.JPG" alt="">
</a>

3. 确认插件全局变量存在 #

打开浏览器控制台（F12），输入console.log(lgThumbnail, lgAutoplay)，如果输出undefined，说明插件脚本未正确加载：

• 检查CDN链接是否有效，可替换为对应版本的lightGallery插件链接。
• 确保插件脚本在lightgallery.min.js之后加载，顺序不能颠倒。

4. 添加标题支持 #

要实现图片标题功能，只需在<a>标签中添加data-sub-html属性，同时可在初始化配置中开启相关支持：

调整后的图库结构

<div class="gallery1" id="gallery1">
    <a href="assets/images/events/IMG_2464.JPG" data-sub-html="<h4>活动照片1</h4>">
      <img src="assets/images/events/IMG_2475.JPG" alt="活动照片1">
    </a>

    <a href="assets/images/events/IMG_4713.JPG" data-sub-html="<h4>活动照片2</h4>">
      <img src="assets/images/events/IMG_4713.JPG" alt="活动照片2">
    </a>
</div>

初始化配置补充（可选）

如果需要更灵活的标题控制，可在配置中添加：

lightGallery(gallery, {        
    controls: false,
    speed: 200,
    download: false,
    counter: false,
    plugins: [ lgThumbnail, lgAutoplay],
    subHtmlSelectorRelative: false // 若标题是直接写的HTML，设为false即可
})

内容的提问来源于stack exchange，提问作者steve123