【相对路径详解】

在 WEB 前端开发的过程中经常会遇到引入外部文件的情况,例如在 HTML 文件里引入外部 JS 文件和外部 CSS 文件、在 CSS 文件里引入图片文件等。对于初学者来说文件的引入是一个相当恼火的事情,在刚开始的时候我经常会因为路径引用错误而不知道该如何修改,为了方便各位初学人士快速掌握路径的相关问题,特此总结。

注:文中的路径引用均为相对路径,绝对路径在此不做介绍。

我们有如下的文件夹结构:

【相对路径详解】

 当我们在 demo.html 中想要引用 demo.css 样式文件时,写法如下:

<link rel="stylesheet" href="assets/css/demo.css" />

 当我们在 demo.html 中想要引用 demo.png 时,写法如下:

<img src="assets/images/demo.png"/>

当我们在 demo.css 文件中想要引用 demo.png 时应该怎么做呢?我们可以看到, demo.css 与 demo.png 并不在同一个文件夹目录下面,显然如下的写法是错误的:

background-image: url(assetsimages/demo.png);

正确的写法如下:

background-image: url(../images/demo.png);

自己总结了一个比较好记的方法。我们要在 demo.css 文件中引用 demo.png ,那么我先找到 demo.css ,如下图:

【相对路径详解】

发现在  demo.css  存在的地方没有 demo.png 也没有 demo.png 存在的文件夹 images ,这个时候我要向前面的文件夹找,就要加 " ../ ",这样记忆起来变快了很多,自从这样记忆之后我的文件引入便顺手多了。以后在其他地方使用这些代码文件的时候,不需要再重新修改代码里的路径,只需要把 demo 文件夹拷贝就可以了。