绝对路径与相对路径 15.9.12

最新推荐文章于 2025-08-11 21:51:50 发布
原创 最新推荐文章于 2025-08-11 21:51:50 发布 · 452 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#路径 #css #node.js

本文详细解释了绝对路径与相对路径的概念，并通过实例说明了两者在网页开发中的具体应用，帮助开发者正确使用路径引用资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

绝对路径与相对路径  15.9.12

 

 

由于前期对概念理解的不清，导致做项目时在进行css样式引入图片时，出现了不小的问题，好多路径没搞对，前端页面显示不出来。

记录下，以备后期查阅。同时分享给所需之人。

首先，说下这俩个的概念。

1.      绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置。也就是存放的真正路径。Eg:D:\Program Files\MySQL这就是我本地磁盘下MySQL存放的绝对地址。

 

2.      相对路径

 

a.如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

 

b.如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

 

就那现在我用node.js做的一个例子为例：


 

 

例子二：

像下面这种情况是三级关系。




其中，


 


P081130110
关注
Python常用组件、命令大总结(持续更新)
LDC，公众号【轻松学编程】
03-12 1万+
Python后端开发常用组件、命令（干货） 持续更新中… 1、生成6位数字随机验证码 import random import string def num_code(length=6): """ 生成长度为length的数字随机验证码 :param length: 验证码长度 :return: 验证码 """ return ''.jo.....................
Qt开发经验总结
草上爬的博客
12-02 1万+
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Newline required at end of file but not found
热门推荐
zhouzy539的博客
12-09 1万+
遇到一个很奇怪的报错  居然要在/style后敲个回车，以空格结尾 像这样，13行不能没有 另外，还有一个奇怪的报错， Unexpected tab character 解决方法 在eslint的配置文件中（.eslintrc）rules项中添加一行："no-tabs":"off"，如下图：   挺好的一篇博客 https://blog.csdn.net/Lucky...
相对路径和绝对路径的区别
weixin_33758863的博客
03-01 2579
以后慢慢启用个人博客：http://www.yuanrengu.com   在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。    1.绝对路径     绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布...
java输入和输出路径_Java输入输出
weixin_42214654的博客
02-24 975
Java输入输出学习File类File类是java.io包下代表与平台无关的文件和目录，也就是说，如果希望在程序中操作文件和目录，都可以通过File类来完成。值得指出的是，不管是文件还是目录都是使用File来操作的，File能新建、删除、重命名文件和目录，File不能访问文件内容本身。如果需要访问文件内容本身，则需要使用输入/输出流。访问文件和目录File类可以使用文件路径字符串来创建File实例...
java使用aspose实现文件预览工功能
qisoft1213的博客
11-23 2073
前后端分离项目实现文件预览 效果图： 1.实现思路 用户上传的文件类型多种多样，这里主要是实现对office文件的预览，预览一般是不需要编辑的，所以预览时pdf文件最为方便，我们的思路就是将用户上传的各种office文件转为PDF文件保存下来，用户预览时直接读取PDF，使用浏览器自带的PDF预览功能便可进行预览。核心功能就在于如何将office文件转换为PDF，这里主要用到的技术apose，它是一个很强大的office文档处理软件，可以完美的实现word文档转换为pdf文件，缺点就是软件是需要付费
Node.js快速入门
weixin_40850986的博客
02-27 1103
Node.js快速入门 1、Node.js安装与配置 1.1 Node.js安装 （1）源码编译安装 下载最新版源码：https://nodejs.org/dist/v6.9.5/node-v6.9.5.tar.gz [root@hadron ~]# cd /usr/local/src/ [root@hadron src]# wget https://nodejs.org/dist/...
SpringBoot瘦身部署（15.9 MB - 92.3 KB）
C3Stones
07-06 287
1. 简介   SpringBoot项目部署虽然简单，但是经常因为修改了少量代码而需要重新打包上传服务器重新部署，而公网服务器的网速受限，可能整个项目的代码文件仅仅只有1-2MB甚至更少，但是需要上传几十MB甚至更大的jar包而受限整体的部署速度。   项目基本稳定后，lib引入的jar很少再有更新了，假如可以将项目所需的lib放到外部路径，仅仅打包代码文件，可将包大小缩小到几十倍甚至几...
Gradle 2.0 用户指南翻译——第十五章. 任务详述
一个码农的博客
02-01 697
在入门教程（《第六章，构建脚本基础》）中，你已经学会了如何创建简单的任务。之后你还学习了如何在向任务添加额外的行为。你也已经学会了如何创建任务之间的依赖。这都是简单的任务。但是Gradle将任务的概念推得更深远。 Gradle支持增强任务，也就是有自己的属性和方法的任务。这是真正的与你所使用的Ant目标（target）的不同之处。这些增强的任务可以由你或者是Gradle提供。
RTSP 协议
Biao
04-18 1万+
E-mail：bryanj@163.com 译者： Bryan.Wong（王晶，宁夏固原） 译文版本：alpha 0.80 译文发布时间：2007-7-25 版权：本中文翻译文档之版权归王晶所有。可于非商业用途前提下自由转载，但必须保留此翻译及版权信息。 http://www.uushare.com/filedownload?user=bryanj&id=611206   网络工作组
Gradle 2.0 用户指南翻译——第十六章. 使用文件
一个码农的博客
02-11 820
大多数构建工作都需要使用到文件，Gradle 添加了一些概念和 API 来帮助你实现这一点。 16.1. 查找文件 你可以使用Project.file()方法来找到相对于项目目录的文件。 示例 16.1. 查找文件
This dependency was not found: * @/api/sop/emergency in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/emergency/ememanage1.vue?vue&type=script&lang=js To install it, you can run: npm install --save @/api/sop/emergency 这是什么错误 遇到这个错误该怎么解决
05-28
- 如果文件已移动，将绝对路径`@/api/sop/emergency`改为**相对路径**（例如`../../api/sop/emergency`）[^4]。 - 确保路径中的目录层级和文件名与实际完全一致（注意大小写敏感）。 2. **验证别名`@`的配置** -...
ERROR Failed to compile with 1 error 16:52:59 error in ./src/router/index.js Module not found: Error: Can't resolve '../views/AboutView.vue' in 'C:\源码\巩固vue\1\hello-world\src\router' ERROR in ./src/router/index.js 13:19-82 Module not found: Error: Can't resolve '../views/AboutView.vue' in 'C:\源码\巩固vue\1\hello-world\src\router' @ ./src/main.js 4:0-30 6:19-25 webpack compiled with 1 error ERROR Failed to compile with 3 errors 16:53:11 error in ./src/App.vue?vue&type=script&lang=js Module not found: Error: Can't resolve './components/HelloWorld.vue' in 'C:\源码\巩固vue\1\hello-world\src' error in ./src/views/HomeView.vue?vue&type=script&lang=js Module not found: Error: Can't resolve '@/components/HelloWorld.vue' in 'C:\源码\巩固vue\1\hello-world\src\views' error in ./src/router/index.js Module not found: Error: Can't resolve '../views/AboutView.vue' in 'C:\源码\巩固vue\1\hello-world\src\router' ERROR in ./src/App.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js) 1:0-53 Module not found: Error: Can't resolve './components/HelloWorld.vue' in 'C:\源码\巩固vue\1\hello-world\src' @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55 @ ./src/main.js 2:0-28 6:10-13 ERROR in ./src/views/HomeView.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=js) 2:0-53 Module not found: Error: Can't resolve '@/components/HelloWorld.vue' in 'C:\源码\巩固vue\1\hello-world\src\views' @ ./src/views/HomeView.vue?vue&type=script&lang=js 1:0-200 1:0-200 1:201-390 1:201-390 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 6:49-55 @ ./src/router/index.js 2:0-45 6:13-21 @ ./src/main.js 4:0-30 6:19-25 ERROR in ./src/router/index.js 13:19-82 Module not found: Error: Can't resolve '../views/AboutView.vue' in 'C:\源码\巩固vue\1\hello-world\src\router' @ ./src/main.js 4:0-30 6:19-25 webpack compiled with 3 errors
05-14
2. **别名替换**：将 `@/components/Button` 转换为绝对路径 3. **模块搜索**：在 `node_modules` 和项目目录中递归查找文件 当出现 `Module not found` 错误时，通常发生在第一阶段或第二阶段[^2]。 ### 相关...
JS深拷贝 浅拷贝、CSS垂直水平居中
最新发布
mashirokayo的博客
08-11 800
浅拷贝，通俗来说，就是把一个对象obj1的属性值直接拷贝给另一个对象。不管这个值是普通的数据类型，还是引用类型。实现方法：1.使用Object.assign方法 2.使用扩展运算符 3.手写拷贝函数 拷贝对象的属性与源属性共享相同的引用。当更改源对象或拷贝的副本时，可能导致对应的对象也发生更改。如果对象obj1是obj2的浅拷贝，obj1！==obj2成立。两个对象的属性有相同的名称且顺序相同、属性值相等、原型链相等。对拷贝的副本的顶层属性的重新赋值不会影响源对象；对拷贝副本的嵌套对象的重新赋值
SassSCSS：让CSS拥有超能力的预处理器
x15514104477的博客
08-06 1176
本篇文章更加深入的讲解了Sacc的知识点以及他的特性，用生动形象的话语使得读者更加容易接受。再去结合实战案例更加稳固了知识点
CSS包含块与百分比取值机制完全指南
Yue
08-07 1154
CSS包含块与百分比取值机制指南 核心概念： CSS包含块是元素布局的参考框架，决定了元素的定位和百分比计算基准。不同定位方式的元素具有不同的包含块确定规则：常规流元素参考最近的块级祖先内容区，绝对定位元素参考最近的非static定位祖先内边距区，固定定位元素则始终参考视口。 百分比计算机制： 宽度/高度：基于包含块的对应尺寸 内外边距：垂直方向也基于包含块宽度（非常规认知） 定位偏移：top/bottom基于高度，left/right基于宽度
HTML 与 CSS：从 “认识标签” 到 “美化页面” 的入门指南
2301_80543957的博客
08-08 968
HTML（HyperText Markup Language，超文本标记语言）是用于创建和描述网页的标准标记语言。他不是编程语言，而是通过标记标签来定义网页结构和内容的标记语言。method：表单数据的提交方式，常用的有post和get。span：行内元素，不会独占一行，常用来包裹小段文本。div：块级元素，会独占一行，常用来做页面大结构。textarea标签：多行文本输入框。链接与资源标签（链接外部标签）无语义标签：div&span。select标签：下拉菜单。标题标签：h1-h6。
CSS accent-color：一键定制表单元素的主题色，告别样式冗余
探索技术与生活
08-11 669
CSS新增的accent-color属性为前端开发提供了便捷的表单样式定制方案，可一键统一复选框、单选按钮、进度条等表单元素的强调色，无需复杂CSS代码。该属性解决了传统表单样式定制中的代码冗余、兼容性差和交互损耗问题，支持全局设置和局部控制，能与其他CSS属性灵活组合。通过实战案例展示了如何快速实现品牌色统一的表单页面，大幅提升开发效率与设计一致性。
Javaweb（1）html、css、js
john_166的博客
08-07 999
HTML是网页的骨架，负责结构和内容，通过标签定义文本、图片等元素；CSS是网页的皮肤，控制样式和布局，包括盒模型、Flexbox等；JavaScript实现交互功能，通过DOM操作动态更新页面，支持异步编程和事件处理。三者共同构建现代网页。
vs 2017 15.9.17
08-02
VS 2017 15.9.17是指Visual Studio 2017的一个版本号。Visual Studio是由微软公司开发的一款集成开发环境（IDE），用于开发各种软件应用程序。15.9.17是该版本的特定编号，表示该版本是在2017年的第15个更新版本中发布的，具体的编号为15.9.17。 VS 2017 15.9.17具有一些重要的功能和更新。其中包括修复了之前版本中的一些bug和漏洞，提高了软件的稳定性和性能。此外，它还可能引入了一些新的功能和改进，以帮助开发人员更轻松地创建和调试他们的应用程序。 通过使用VS 2017 15.9.17，开发人员可以方便地编写各种类型的应用程序，包括桌面应用程序、移动应用程序和云服务应用程序。它提供了丰富的工具和功能，如代码编辑器、调试器、项目管理器、版本控制等，这些都极大地提高了开发效率和质量。 VS 2017 15.9.17还支持多种编程语言，包括C＃、C++、Visual Basic和Java等。开发人员可以根据自己的需求选择合适的语言来开发他们的应用程序。 总之，VS 2017 15.9.17是一款功能强大的集成开发环境，提供了丰富的工具和功能，帮助开发人员快速高效地创建和调试各种类型的软件应用程序。不仅修复了之前版本的问题，还引入了新的功能和改进，使开发过程更加方便和有效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值