上一章我们在写文件地址的时候遇到了问题,因为我们使用的是文件的绝对地址,但是网页发布之后,这个地址不好用了。

根据所讲的故事,可以猜测出,这种情况需要使用相对地址。虽然我不知道相对地址如何去写,但是,我觉得如果把网页和图片放在一起,发布的时候也一起发布,保持它们的相对位置不发生变化,这一点肯定是没错的。

所以我们写代码的时候,一般要先建立一个工程文件夹。其实就是说,把相关的内容全都放在一个文件夹里。发布的时候,就把文件夹里的内容全部上传上去,保持它们之间的相对位置。然后在代码中使用的全都是相对地址,是不是就不会出现找不到文件的情况了?

那么下一个问题就是,如何去写相对地址?这很简单,不过我们先要明确一个问题:斜线代表了什么?

我这么问你可能一下子反应不过来,那么我们来看下上一章写下的文件地址:

file:///E:/全球最可爱的小老鼠/真的帅/自拍照/最满意.jpg

这时候你明白了,这不就是分隔文件夹名称么。上面表示 E 盘里面的——“全球最可爱的小老鼠”这个文件夹里面的——“真的帅”文件夹里面——“自拍照”文件夹里面——“最满意.jpg” 这个文件。

说起来有点长,但是只要使用电脑超过两个月的一般都明白,而且觉得我这么说一遍很废话。嗯,我就是想说:在网址中斜线代表的也是这样的,文件夹的层级关系[1]

现在我们有这样一个目录结构:

E:.
├─images
│  ├─小老鼠.jpg
│  └─page-a.html
├─dir-a
│  ├─大花猫.jpg
│  └─page-b.html
└─index.html

E 盘下有有两个文件夹 imagesdir-a,一个网页文件 index.html。两个文件夹里各有一张图片和一个网页文件,这个结构表达方式还是很直观的。

我们先写出他们的绝对地址:

file:///E:/images/小老鼠.jpg
file:///E:/images/page-a.html
file:///E:/dir-a/大花猫.jpg
file:///E:/dir-a/page-b.html
file:///E:/inedx.html

相对于谁

然后我们要确定一个基准,相对地址,你要知道这是想对谁而言。就是我面前的咖啡,这个“我”。这个问题也简单——“在哪个文件里说这件事,就以哪个文件作为基准”。

我们来举个例子,看第一个文件夹。我现在想在 page-a.html 这个文件里插入 小老鼠.jpg 这张图片。因为是在 page-a.html 里面写这个代码,那么现在就以 page-a.html 来作为基准。

去处重复

然后我们把这两个地址写下来:

file:///E:/images/小老鼠.jpg
file:///E:/images/page-a.html

去掉前面相同部分(相同的文件夹部分,文件名里有相同的字可不算数):

小老鼠.jpg
page-a.html

然后看那个作为基准的文件,是否只剩下了文件名。现在上面的 page-a.html 确实只有文件名了,这时候我们的相对地址就成了,我们在 page-a.html 里面写 <img src="小老鼠.jpg"> 就可以了。

向上一层

不过还有一种情况:去掉相同部分后,剩下的不只是文件名。比如我们现在想在 page-b.html 中插入 小老鼠.jpg 这张图片,我们按照上面的操作,以 page-b.html 为基准,先写下两个地址:

file:///E:/images/小老鼠.jpg
file:///E:/dir-a/page-b.html

去掉前面相同部分:

images/小老鼠.jpg
dir-a/page-b.html

现在基准文件剩下的并不只是文件名,还有一个文件夹 dir-a 这时候怎么办呢?

在基准文件的路径上去掉一个文件夹,同时在另一个文件路径前添加一个 ../

../images/小老鼠.jpg
page-b.html

反复重复上述动作,直到基准文件只剩下文件名为止。


只是非常无脑的三步操作,那么大家尝试着,把在这三个网页文件中,分别插入这两张图片的情况都写一下吧~

【本章助记卡片:卡片 for 第二十六章

>注释 1: 你和我说现在前端路由系统里表达的已经不是层级关系了,而是一个个的参数。没错,然而那是用后端的 Rewrite 强行把网址指向某个特定的页面(忽略网址原本的意义),才可以把它当作参数用的。