HTML引入文件时应何时使用./和/路径？本地加载异常原因是什么？

两种路径的核心基准规则不同 #

• 以/开头的路径：站点根目录相对路径
  该路径的解析基准是「当前服务的根目录」：
  当项目部署到服务器时，服务的根目录就是你站点的根目录（比如部署在https://yourdomain.com/下，<img src="/img/example.png">就会被解析为https://yourdomain.com/img/example.png，对应你服务器上站点根目录下的img文件夹，所以加载正常）
  当你直接本地打开HTML文件时，浏览器使用file://协议访问，此时的「根目录」是你本地磁盘的系统根目录（Windows下对应盘符根目录，macOS/Linux对应系统根目录），浏览器会尝试从磁盘根目录下找/img/example.png，和你实际存放图片的项目目录位置不符，因此加载失败。
• 以./开头的路径：当前文件相对路径
  该路径的解析基准是「当前打开的HTML文件所在的文件夹」，和访问协议、部署位置无关：
  不管是本地file://协议打开，还是部署到服务器上访问，都会以当前HTML文件的父文件夹为起点找./img/example.png，只要你项目内的文件相对位置不变，两种场景都能正常解析。

适用场景建议 #

• 若资源和当前HTML文件的相对位置固定（比如同项目内的页面专属资源），优先使用./开头的相对路径，兼容性更强
• 若资源是站点全局通用资源，且确认项目会直接部署在域名根目录下，可使用/开头的根路径

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