URL中绝对路径与相对路径拼接问题总结

1. 基础环境

这里用nginx的docker镜像构建了一个服务，步骤如下：

• sudo docker pull nginx
• sudo docker run -d --name nginx01 -p 8083:80 nginx

nginx发布的根目录是/usr/share/nginx/html，目录结构如下:

.
|-- 50x.html
|-- assets
|   `-- images
|       |-- t1.png
|       `-- t2.jpg
|-- index.html
`-- subpage
    `-- sub.html

2. 测试

请求的url为http://192.168.136.167:8083/subpage/sub.html，html的测试数据如下:

• <img src="./assets/images/t2.jpg" alt="测试以.开头" style="width:50px;height:60px;">
• <img src="../assets/images/t1.png" alt="测试以…开头" style="width:50px;height:60px;">
• <img src="/assets/images/t2.jpg" alt="测试以/开头" style="width:50px;height:60px;">
• <img src="//assets/images/t2.jpg" alt="测试以//开头" style="width:50px;height:60px;">

请求时的最终拼接后的url:

• http://192.168.136.167:8083/subpage/assets/images/t2.jpg
• http://192.168.136.167:8083/assets/images/t1.png
• http://192.168.136.167:8083/assets/images/t2.jpg
• http://assets/images/t2.png

界面最终的显示结果：

2.1 总结

• 以 . 、 .. 及 目录或文件名 开头的路径，拼接时会以url地址栏的当前目录路径与该路径拼接
• 以 / 开头的路径，拼接时会以url地址栏的协议及域名与该路径拼接
• 以 // 开头的路径，拼接时会以url地址栏中的协议与该路径拼接

url地址栏中目录路径与文件路径区分:

• url地址栏中路径以/结尾表示目录路径，如http://localhost:8083/abc/，此时abc就表示目录
• url地址栏中路径不以/结尾表示文件路径，如http://localhost:8083/abc，此时abc就表示文件

2.2 本地文件url

打开本地文件时url格式如下:

• file:///D:/readme.html