CSS图片仅在Brackets实时视图（Chrome）显示，其他场景无法加载求助

这问题我之前帮同事排查过，核心原因其实和Brackets实时预览的运行机制直接相关！

关键差异：HTTP服务器 vs 文件协议 #

Brackets的实时视图模式并不是直接打开本地HTML文件，而是悄悄启动了一个本地HTTP服务器（比如http://localhost:8080这类地址），所有资源请求都是基于这个服务器的项目根目录来解析的。

而你直接用浏览器打开HTML文件时，用的是file://协议，浏览器会按照本地文件系统的路径规则来解析资源——这两种模式的路径解析逻辑完全不一样，最容易踩坑的就是「根相对路径」。

举个例子：
如果你在CSS里写了：

background: url('/images/bg.jpg');

• 在Brackets预览的HTTP服务器里，/指向你的项目文件夹根目录，能正确找到项目文件夹/images/bg.jpg；
• 但在file://协议下，/指向的是你的电脑磁盘根目录（比如C:/），浏览器会去C:/images/bg.jpg找文件，自然找不到！

具体解决步骤 #

1. 替换根相对路径为文件相对路径
   删掉路径开头的/，改用相对于当前文件的层级路径。比如：

   • 如果你的CSS文件在css/style.css，图片在images/bg.jpg，就写：

     background: url('../images/bg.jpg');
     

   • 如果HTML文件在项目根目录，引入favicon就写：

     <link rel="icon" href="images/favicon.ico">
     

2. 验证路径正确性
   右键Brackets里的图片文件，选择「复制路径」（或者「复制相对路径」），直接粘贴到CSS/HTML里，避免手动输入出错。

3. 检查浏览器请求路径
   直接打开HTML文件后，按F12打开开发者工具，切换到「网络」面板，刷新页面看图片的请求地址——如果显示的是file:///C:/images/xxx.jpg这类磁盘根目录路径，就说明你用了根相对路径，赶紧改掉！

4. 确认大小写一致性
   虽然Windows系统不区分文件大小写，但部分HTTP服务器（包括Brackets的预览服务器）可能在某些场景下严格区分，尽量保证文件名和路径的大小写完全匹配（比如Images和images不要混写）。

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