Bootstrap3 Navbar本地图片不显示求助（Visual Studio环境）

嘿，我之前也碰到过一模一样的情况！VS拆分视图能正常看到图片，一到Chrome或IE里就只显示破损图标，网络图片却完全没问题——其实这几个容易被忽略的细节大概率是元凶，咱们一步步排查：

• 检查图片文件的「复制到输出目录」设置
  这是最容易漏掉的关键点！右键你的本地图片文件，选择「属性」，在「高级」选项里找到「复制到输出目录」，一定要设置成「始终复制」或者「如果较新则复制」。要是选了「不复制」，VS运行项目时不会把图片同步到IIS Express的运行目录，浏览器自然找不到文件。

• 确认相对路径的基准是当前HTML文件
  别搞混项目根目录和HTML文件的位置！举个例子，如果你的项目结构是：

  MyProject/
  ├── pages/
  │   └── index.html
  └── assets/
      └── logo.png
  

  那在index.html里引用图片的路径就得是../assets/logo.png（先从pages目录退回到根目录，再进入assets文件夹），而不是assets/logo.png或者/assets/logo.png。开头带/的绝对路径会直接指向IIS Express的站点根目录，如果你的项目不是作为根站点运行（比如访问URL是localhost:xxxx/MyProject/），绝对路径肯定会找不到文件。

• 注意文件名的大小写
  Windows系统本身不区分文件名大小写，但浏览器通过IIS Express访问文件时是严格区分的！比如你代码里写的是src="assets/Logo.png"，但实际文件是logo.png，VS的本地视图能识别，但浏览器会直接返回404错误。

• 强制刷新浏览器缓存
  有时候浏览器会缓存之前的404响应，哪怕你已经修复了路径，还是会显示破损图标。按下Ctrl+Shift+R（Chrome/Edge）或者Ctrl+F5（IE）强制刷新页面，或者打开开发者工具（F12），在「Network」标签勾选「禁用缓存」后重新加载试试。

• 用开发者工具排查请求状态
  打开Chrome的F12，切换到「Network」标签，刷新页面后找到图片的请求项：

  • 如果状态码是404，说明路径不对，对比请求的URL和实际文件位置就能快速定位问题；
  • 如果是403这类状态码，可能是文件权限问题，右键图片文件确保当前用户有读取权限。

按这个顺序排查下来，基本就能解决问题啦！

内容的提问来源于stack exchange，提问作者N.L