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

原创 2018年04月16日 00:58:03

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

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


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

                   先看例子: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




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

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

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

。。。。。。。。


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

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




版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cvper/article/details/79955412

什么是this

  • 2016年05月08日 14:18
  • 19KB
  • 下载

前端-- 绝对路径和相对路径详解

比如说你的C盘ABC文件夹下有两个文件1和2 如果要文件1说出文件2的位置(也就是路径),那么它有两种表示方法: C:\ABC\2  这就是绝对路径,指明2文件在C盘ABC文件下,从最大的目录...
  • helongzhong
  • helongzhong
  • 2016-11-19 19:15:26
  • 3702

前端页面一些路径问题的总结

今天把一个站点重新部署了一下,目录结构调整比较大,发现了几个问题,本文总结一下 首先页面里的URL,和硬盘的路径有对应关系,主要是文件服务器在解析URL的时候,会跟硬盘上的目录结构对应起来找实体文件...
  • kyfxbl
  • kyfxbl
  • 2015-06-18 18:11:36
  • 1693

路径中的“/”是什么意思

“/”就是根目录,就是localhost的意思
  • daijiguo
  • daijiguo
  • 2015-07-16 09:50:20
  • 388

WEB前端之路径问题

最近写了一些前端,涉及到图片,视频等资源的路径问题,在这里总结分享一下。路径分两种绝对路径和相对路径。 绝对路径: 绝对路径指的是资源的实际位置,分隔符由“/”“\”两种,在我看来就是我...
  • l6l6l
  • l6l6l
  • 2016-07-31 21:08:14
  • 568

前端页面获取web根路径

String basePath = request.getScheme() + "://" + request.getServerName(); if (request.getServ...
  • shersfy
  • shersfy
  • 2016-12-20 16:34:10
  • 650

关于编译中的-l -L -I参数详解

1。gcc包含的c/c++编译器 gcc,cc,c++,g++,gcc和cc是一样的,c++和g++是一样的,(没有看太明白前面这半句是什 么意思:))一般c程序就用gcc编译,c++程序就用g+...
  • giggle90
  • giggle90
  • 2014-08-13 16:26:37
  • 340

Java前端js获取当前项目路径

  • 2014年09月23日 10:20
  • 384B
  • 下载

Web前端开发之定义全局的上下文路径

1.在jsp文件头添加js对象 var basePath=''; 2.引用js对象中定义的全局上下文路径变量 内部直接引用:alert(basePath);外部文件引用:// 头部添加外部js文件 ...
  • csp277
  • csp277
  • 2015-12-07 20:44:35
  • 466

Java(web前端和后端)中相对路径问题

Java路径问题 ../ 相对路径:上级菜单 ./  相对路径: 当前目录,一般可以省略 /:项目目录127.0.0.1:8080 例:在WebRoot的file文件中有一个add...
  • u014483019
  • u014483019
  • 2014-10-20 16:15:48
  • 1109
收藏助手
不良信息举报
您举报文章:前端中使用路径 / ./ ../ ../../ ../../../ 的含义
举报原因:
原因补充:

(最多只允许输入30个字)