兄弟，太懂你核对五十次路径还是看不到图片的崩溃感了！别着急，除了路径本身，还有不少容易被忽略的细节能导致这个问题，咱们一步步排查：

• 先确认服务器根目录的指向
  你用的/img/hangers.jpg是根相对路径，它指向的是服务器运行的根目录，而不是你HTML文件所在的文件夹。比如本地开发时，VS Code的Live Server插件默认把项目文件夹设为根目录；但如果用Express这类后端框架，可能会把public文件夹设为静态资源根目录。
  最简单的验证方法：在浏览器地址栏直接输入http://localhost:xxxx/img/hangers.jpg（把xxxx换成你的开发端口），如果打不开，说明服务器根本找不到这个文件，和Bootstrap的代码没关系。

• 核对文件名的大小写和完整性
  很多系统（比如Linux服务器、部分线上部署环境）是严格区分大小写的！比如你代码里写的是hangers.jpg，但实际文件是Hangers.jpg或者hangers.JPG，这都会导致加载失败。去文件夹里右键查看文件名的完整拼写，包括后缀名。

• 临时移除容器验证样式干扰
  你把navbar-brand嵌套在了.container里，虽然Bootstrap的结构允许，但有时候容器的padding、overflow或者其他样式可能会把图片遮挡或挤消失。可以先临时改成下面的代码试试：

  <a class="navbar-brand" href="#">
    <img src="/img/hangers.jpg" alt="Site Logo" width="30" height="24">
  </a>
  

  如果图片能显示，再回来调整.container的样式适配。

• 查看浏览器控制台的错误提示
  按F12打开开发者工具，切换到「网络」标签，刷新页面，找到这张图片的请求条目：

  • 如果状态码是404：还是路径问题，再仔细核对服务器根目录下img文件夹的位置；
  • 如果是403：权限问题，本地开发的话检查文件夹是不是只读，线上的话调整文件或文件夹的访问权限；
  • 如果是200但图片不显示：大概率是图片本身损坏了，试试用图片编辑器打开hangers.jpg，看能不能正常渲染。

• 换相对路径试试
  如果你拿不准服务器根目录的指向，可以换成相对路径。比如：

  • 你的HTML文件和img文件夹同级（比如都在项目根目录）：用./img/hangers.jpg；
  • HTML在views文件夹里，img在项目根目录：用../img/hangers.jpg。
    相对路径在本地开发时经常更稳妥。

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