前端中使用路径 / ./ ../ ../../ ../../../ 的含义

向右看齐 2022-05-27 09:11 268阅读 0赞

当我们需要使用图片资源的时候，就涉及到了路径问题，

我们来看看基本的几个 / ./ ../ ../../ ../../../ 的含义；

第一个 / 这个斜杠代表的是根目录的意思，什么是根目录呢？

  1.                先看例子：F盘中有个文件夹vue\_bamboos和一张图片 test-me.png
  3.                                 vue\_bamboos下有一个文件夹 a ,  a文件夹中有一个文件b;
  5.                                 b文件夹下有一个index.html文件；
  7.                F---------------------------------------
  9.                         vue\_bamboos-------------------
  11.                                     a-------------------------
  13.                                               b------------------
  15.                                                      index.html---
  17.                          test-me.png---------------------
  22.                 index.html:显示一张图片test-me.png, 这里我们使用就是根目录，也就是我们项目目录的上
  24.                                    一级，也就是 F 盘是我们的根目录；注意，我们的项目目录是vue\_bamboos，但是
  26.                                   vue\_bamboos不是根目录，它的上一级才是！！！

< body>

< img src= “/test-me.png” alt= “测试根目录” >

</ body>

第二个 ./ 这个代表的是当前目录，也就是和我们的index.html 在同一级上；

  1.             假设我们的项目目录：
  3.             F-----------------------------------
  5.                     vue\_bamboos---------------
  7.                              index.html-------------
  9.                              test-me.png-----------

< body>

< img src= “./test-me.png” alt= “测试根目录” >

< img src= “test-me.png” alt= “测试根目录” >

</ body>

也就是说我们可以这样写 ./test-me.png 或者省略 ./ 也是可以的 , 直接写 test-me.png

第三个 ../ 这个代表的意思是返回到上一级目录；

第四个 ../../ 这个代表的是返回到上一级，再向上返回一级，返回了两级；

第五个 ../../../ 这个比上面的多了一级，那么就是向上返回三级了；

。。。。。。。。

../ ../../ ../../../ 这三个还是比较好理解的,因为使用的频率是挺高的，

但是 / 和 ./ 就不是太常用了，有的同学可能还没有用过，所以可以了解一下；

发表评论

表情：
评论列表 （有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读