VS Code可跳转的HTML相对路径在Live Server运行时图片无法加载

核心原因 #

VS Code的Live Server插件的静态服务有根目录访问限制，默认将你在VS Code中打开的文件夹作为服务的根路径/，不允许访问根目录的上级路径，这是静态服务器的通用安全策略，避免恶意读取本地其他文件。
你在VS Code中悬停点击能打开路径，是因为VS Code的路径识别基于本地完整文件系统，不受Live Server的服务根目录限制，两者的路径解析逻辑完全不同。
你当前打开的根文件夹是css文件夹，你写的../想跳转到css文件夹的上级目录，直接被Live Server拦截，最终请求路径会被解析为css/html/images/coffee background.jpeg，该路径不存在，因此报Cannot GET错误。

解决办法 #

• 方法一（最推荐）：关闭当前工作区，重新打开css文件夹和html文件夹共同的上级文件夹作为VS Code工作区，此时Live Server的根目录和本地文件的项目根目录对齐，你原有写法<img src="../html/images/coffee background.jpeg" alt="tx"/>可以正常生效，也可以改为绝对路径写法减少相对路径解析误差：

  <img src="/html/images/coffee background.jpeg" alt="tx"/>
  

• 方法二：如果需要保持当前打开css文件夹的工作区设置，将目标图片复制到css文件夹内部，比如在css下新建images子文件夹存放图片，修改路径为：

  <img src="./images/coffee background.jpeg" alt="tx"/>
  

• 额外优化建议：建议将文件名中的空格替换为下划线或连字符，比如改为coffee_background.jpeg，避免不同环境下空格转义带来的解析异常。

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