当我们需要使用图片资源的时候,就涉及到了路径问题,我们来看看基本的几个 /
、 ./
、 ../
、 ../../
、 ../../../
的含义;
第一个/
这个斜杠代表的是根目录的意思,什么是根目录呢?
先看例子:F盘中有个文件夹vue_bamboos和一张图片 test-me.png, vue_bamboos下有一个文件夹 a , a文件夹中有一个文件b;
b文件夹下有一个index.html文件;
F---------------------------------------
vue_bamboos-------------------
a-------------------------
b------------------
index.html---
test-me.png---------------------
index.html:显示一张图片test-me.png, 这里我们使用就是根目录,也就是我们项目目录的上一级,也就是 F 盘是我们的根目录;注意,我们的项目目录是vue_bamboos,但是vue_bamboos不是根目录,它的上一级才是!!!
<body>
<img src="/test-me.png" alt="测试根目录">
</body>
第二个 ./
这个代表的是当前目录,也就是和我们的index.html 在同一级上;
假设我们的项目目录:
F-----------------------------------
vue_bamboos---------------
index.html-------------
test-me.png-----------
<body>
<img src="./test-me.png" alt="测试根目录">
<img src="test-me.png" alt="测试根目录">
</body>
也就是说我们可以这样写 ./test-me.png 或者省略 ./
也是可以的 , 直接写 test-me.png
第三个 ../
这个代表的意思是返回到上一级目录;
第四个 ../../
这个代表的是返回到上一级,再向上返回一级,返回了两级;
第五个 ../../../
这个比上面的多了一级,那么就是向上返回三级了;
。。。。。。。。
../
、 ../../
、 ../../../
这三个还是比较好理解的,因为使用的频率是挺高的,
但是 /
和 ./
就不是太常用了,有的同学可能还没有用过,所以可以了解一下;