如何在Bootstrap导航栏设置Logo？解决Logo不显示问题

你遇到的核心问题大概率是文件路径不匹配——你提到Logo和当前HTML文件在同一目录下，但代码里写的../../../public/logo/logo.png相当于往上跳转三级目录再找public文件夹，这显然和实际文件位置不符！下面给你几个针对性的解决步骤：

1. 修正文件路径 #

如果Logo和当前HTML文件在同一目录，直接用文件名即可，不用多级跳转：

<img class="img-responsive" src="logo.png" alt="网站Logo">

• 记得加上alt属性，既符合网页规范，也能在图片加载失败时显示替代文本，提升用户体验。

2. 检查Bootstrap适配类 #

Bootstrap 4及后续版本中，img-responsive已经被替换为img-fluid，如果你的Bootstrap版本较新，换成这个类能更好地保证Logo自适应不同屏幕尺寸：

<img class="img-fluid" src="logo.png" alt="网站Logo">

3. 确认文件本身的正确性 #

• 检查Logo文件名是否完全匹配（注意大小写！比如Logo.png和logo.png在Linux服务器环境下是两个不同的文件）
• 确认文件格式确实是PNG，没有后缀错误（比如不小心存成了logo.png.jpg这种双重后缀）

4. 验证路径有效性 #

可以直接在浏览器地址栏输入你写的路径（比如http://你的域名/../../../public/logo/logo.png），如果无法打开图片，说明路径肯定有误；如果能打开，再检查HTML代码里的路径有没有拼写错误。

最后给你修正后的完整导航栏代码参考：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img class="img-fluid" src="logo.png" alt="网站Logo">
    </a>
  </div>
</nav>

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