web开发中html里的相对路径/ ./ ../以及~的区别

之前一直对html中引入图片时，需要填写的相对路径很困扰，究竟该写/ ./ ../还是直接写“目录名/图片名”或者”图片名” ，这里谈谈我的理解吧。

1. “/”

"/"表示根目录，在web应用程序中就表示从协议到端口的地址部分，如http://localhost:8090

2. "./"

"./"表示当前目录，即文件所在目录。注意：如果直接写“目录名/图片名”或者“图片名”，则相当于“./目录名/图片名”或“./图片名”

3. “../”

"../"表示文件所在目录的上级目录，同理“../../”表示文件所在目录的上级目录的上级目录

4.“~”

实际上“~”的作用和“/”一样，都代表应用程序的根目录。

另外还有其他一些情况：

（1）webpack使用别名路径引用静态图片地址时，需要用~告诉加载器要加载一个模块，而不是相对地址

（2）在ASP.NET应用中，~代表应用程序地址

5. 注意：

如果我们使用的应用程序是像angularJS、Vue等框架搭建的单页面应用，那么我们的html文件所在的目录，就是index.html（就是那个入口html文件）所在的目录，因为所有路由控制的html最后都是加到了index.html中，所以无论其他html文件在哪个目录下的目录下的目录下的......，最终都是加载到index.html中的，所以这些html文件想要引用图片，就应该以index.html的所处目录为准。

但如果是在css文件中写相对路径，则还是要以css文件所在目录为准，因为css文件只是通过href进行了链接，而不是加入了index.html中，详见https://segmentfault.com/a/1190000013845173

转载于:https://my.oschina.net/u/3185947/blog/1602696