浏览器直接打开本地HTML时header背景图不显示报ERR_FILE_NOT_FOUND

为页面header区域配置背景图时，通过VSCode的Live Server插件打开HTML文件，背景图显示正常；直接双击本地HTML文件用浏览器打开时，背景图无法加载，控制台报错Failed to load resource: net::ERR_FILE_NOT_FOUND，已确认图片文件存放在项目对应目录下，使用的CSS代码如下：

.header{
  min-height: 100vh;
  background-image: url("/img/hero.jpg");
  background-size: cover;
  padding: 0 20px;
}

核心问题是路径开头的/在不同打开方式下解析规则不一样：

• Live Server会将当前项目文件夹作为Web服务根目录，路径开头的/会指向项目根目录，因此可以正确找到项目下img/hero.jpg文件
• 直接通过本地file协议打开HTML时，路径开头的/会指向当前磁盘的系统根目录（Windows下为对应盘符根目录，比如C:/，类Unix系统下为系统根目录/），浏览器会去磁盘根目录下查找img/hero.jpg，自然找不到目标文件。

根据实际使用场景二选一即可：

• 如果需要支持双击本地HTML直接打开查看，将路径改为相对路径，去掉开头的斜杠：

.header{
  min-height: 100vh;
  /* 相对当前CSS文件所在目录查找图片 */
  background-image: url("img/hero.jpg");
  background-size: cover;
  padding: 0 20px;
}

如果CSS文件单独存放在css等子目录中，要对应调整路径层级：比如CSS文件在css文件夹、img文件夹和css文件夹同级，路径需要写为url("../img/hero.jpg")，../代表返回上一级目录。

• 如果页面最终要部署到Web服务器上线，保留现有带开头斜杠的根路径写法即可，本地调试统一通过Live Server打开，不需要修改代码，避免上线后出现路径匹配错误。

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