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

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

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

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

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

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

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

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

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

。。。。。。。。

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

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

相关阅读

相关全路径编程：深入理解前端中的路径概念

在前端开发中，路径是一个常见的概念。它用于定位和引用文件、资源或者其他相关内容。全路径编程是指使用完整的路径来引用和操作这些资源。本文将详细介绍前端中的全路径编程概念，并提供相

╰半橙微兮°/ 2024年03月01日 00:54/ 0 赞/ 6 阅读

相关 1 前端路径问题

项目结构 ![60588d08e53b12bdaa1ac6394b0f3382.png][] 测试代码 <!DOCTYPE html> <html lan

Dear 丶/ 2023年09月27日 15:57/ 0 赞/ 29 阅读

相关 springmvc中“/”和前端中“/”的代表含义

今天做毕业设计遇到了springmvc中“/”和前端中“/”代表含义的问题，折磨了我挺久的，网上找到这两篇博客不错： https://www.cnblogs.com/hi3

迷南。/ 2023年07月25日 09:44/ 0 赞/ 68 阅读

相关 Java中访问修饰符的含义及使用范围

Java中访问修饰符的含义及使用范围： 1、要想明白访问修饰符的修饰范围，你得明白一个概念：什么是包？为了更好地组织类，Java提供了包机制。包是类的容器，用于分隔类名空

﹏ヽ暗。殇╰゛Y/ 2023年02月23日 10:54/ 0 赞/ 32 阅读

相关路径上有/**/、/*/的含义

1、路径上有/\\/、/\/的含义 '/node\_modules/@pa\_hcz/umc-ui-editor/src/components/\\/package.json

Love The Way You Lie/ 2022年12月24日 13:55/ 0 赞/ 94 阅读

相关 @click.native中 .native 的含义与使用

vue 当中的 @click.native .native--侦听组件根元素上的原生事件作用：给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑

￡神魔★判官ぃ/ 2022年10月30日 08:30/ 0 赞/ 175 阅读

相关绝对路径中“./”、“../”、“../../”代表的含义，包你一看就会

“./” 代表目前所在目录 “…/”代表上一层目录 "…/…/"代表上上层目录举个栗子在读取某个文件时，路径的写法有如下方式，如图所示 ![在这

青旅半醒/ 2022年09月11日 03:18/ 0 赞/ 196 阅读

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

当我们需要使用图片资源的时候，就涉及到了路径问题，我们来看看基本的几个 / ./ ../ ../../ ../../../ 的含义；

向右看齐/ 2022年05月27日 09:11/ 0 赞/ 173 阅读

相关前端html,css,js中的相对路径与绝对路径

绝对路径：主页上的文件或目录在硬盘上真正的路径,如：c:/Users/mytxt.txt 完整的网址，如：[https://www.baidu.com/][ht

快来打我*/ 2022年04月17日 01:52/ 0 赞/ 172 阅读

相关 vue中路径的配置使用

绝对路径使用：在项目中build文件夹下的webpack.base.conf.js的 ![watermark_type_ZmFuZ3poZW5naGVpdGk_

亦凉/ 2021年09月19日 14:58/ 0 赞/ 442 阅读