第二十六章相对路径如何写-易看设计

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

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

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

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

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

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

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

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

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

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

E 盘下有有两个文件夹 images 和 dir-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

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

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

文章版权归作者所有，未经允许请勿转载。

THE END

第二十六章 相对路径如何写