HTML img标签src路径前置/含义 同目录图片路径写法差异疑问

两种写法的本质区别 #

• 不带前缀斜杠的src="banana.jpg"属于文档相对路径：路径参考基准是当前HTML文件所在的文件夹，当图片和HTML存放在同一目录时，该写法可以正确定位到图片。
• 带前缀斜杠的src="/banana.jpg"属于站点根相对路径：路径参考基准是当前站点的根目录，只有当图片存放在站点根目录下时，该写法才能定位到目标资源。

两个教程示例都生效的原因 #

两个教程的运行场景不同，所以对应写法刚好都能正常加载图片：

第一个示例的运行场景大概率是直接本地打开HTML文件（file协议访问），或是HTML文件存放在站点二级目录下，此时只有文档相对路径能正确指向同目录的图片，带斜杠的写法会错误定位到磁盘根目录/站点根目录下的资源，无法加载。
Youtube教程的运行场景是本地开发服务器（如Live Server、本地Apache服务），且HTML文件和图片都直接存放在站点根目录下，此时两种写法指向的资源位置完全一致，所以带斜杠的写法也能正常加载图片。

「root of the current web（当前站点根目录）」的定义 #

你提到的概念完全对应上述差异，HTML场景下的站点根目录分两种情况判定：

1. 用http/https网络协议访问页面时，站点根目录是当前访问域名对应的顶级路径。比如你访问的页面地址是https://demo.com/docs/tutorial.html，站点根目录就是https://demo.com/对应的服务器存储文件夹，此时/banana.jpg会被解析为https://demo.com/banana.jpg。
2. 用file本地协议打开页面时，站点根目录会被解析为设备本地文件系统的根目录（Windows下为磁盘根目录，macOS/Linux下为系统根目录），该场景下几乎不会使用带斜杠的根相对路径。

常见使用注意 #

如果你的项目后续需要部署到站点的二级目录（比如个人博客的子项目路径），优先使用文档相对路径，避免根相对路径定位错误导致资源加载失败。

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