使用Bridgetown+Bootstrap 5搭建网站时图片无法渲染求助

我正在使用Bridgetown框架结合Bootstrap 5搭建网站，尝试添加导航栏logo图片但无法在站点中正常渲染，当前显示效果如下：

相关代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
  <div class="container">
    <a href="index.html">
      <img src="/output/images/logo-topnav.png" alt="站点名称" height="45" width="225" class="img-fluid"/>
    </a>

    <!-- TOGGLE MENU START -->
    <button
      type="button"
      class="navbar-toggler"
      data-bs-toggle="collapse"
      data-bs-target="#navmenu"
    >
      <span class="navbar-toggler-icon">
    </button>
    <!-- TOGGLE MENU CLOSE -->

    <!-- TOGGLE MENU START -->
    <div class="collapse navbar-collapse" id="navmenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
      </ul>
    </div>
    <!-- TOGGLE MENU CLOSE -->
  </div>
 
</nav>

解决方法 #

1. 修正图片路径引用 #

Bridgetown的站点根目录对应output文件夹，因此图片的src不需要包含/output/前缀，正确路径应为/images/logo-topnav.png。修改后的img标签如下：

<img src="/images/logo-topnav.png" alt="站点名称" height="45" width="225" class="img-fluid"/>

2. 确认文件存放位置 #

确保logo-topnav.png文件放在项目的src/site/images/目录下，Bridgetown在构建或启动开发服务时，会自动将该目录下的资源复制到output/images/中。

3. 修复HTML结构错误 #

原代码中<span class="navbar-toggler-icon">标签未闭合，补充</span>以避免结构异常：

<span class="navbar-toggler-icon"></span>

4. 确保正确构建/启动服务 #

• 开发环境：运行bridgetown serve启动本地服务器，确保静态资源已被正确加载。
• 生产环境：运行bridgetown build生成完整的静态站点，确认output/images/目录下存在logo-topnav.png文件。

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