HTML项目本地打开图片与CSS不加载，仅Live Server可用求助

直接在浏览器打开本地HTML文件时，图片无法加载、CSS也不生效，但用VS Code的Live Server插件打开却一切正常。相关代码如下：

CSS链接代码：

<link rel="stylesheet" href="/CSS Stayle/CSSStyle.css">
<link rel="stylesheet" href="/CSS Stayle/Shapes.css">

图片引入代码：

<img id="CourseFormant" src="/photo/4th.png" alt="fourth Course">

问题原因 #

你使用了以/开头的绝对路径，这种路径在Live Server环境下会被解析为项目文件夹的根目录，但直接打开本地文件时，浏览器会把/识别为电脑磁盘的根目录（比如C盘、D盘根目录），自然找不到对应位置的资源文件。

解决方法 #

把绝对路径改成相对路径，路径从当前HTML文件所在位置出发，指向资源文件。

假设你的项目文件夹结构如下：

你的项目文件夹/
├─ index.html （你的HTML文件）
├─ CSS Stayle/
│  ├─ CSSStyle.css
│  └─ Shapes.css
└─ photo/
   └─ 4th.png

修改后的代码如下：

CSS链接修改 #

<link rel="stylesheet" href="CSS Stayle/CSSStyle.css">
<link rel="stylesheet" href="CSS Stayle/Shapes.css">

（./可省略，代表当前HTML文件所在目录）

图片路径修改 #

<img id="CourseFormant" src="photo/4th.png" alt="fourth Course">

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