fopen的路径怎么写_web前端——路径问题

在web前端开发中,路径的使用是关键。本文介绍了fopen路径的相对路径和绝对路径概念,强调了相对路径在项目迁移时的优势。详细讨论了在HTML中引用图片、样式文件和JS文件时的路径写法,包括同一文件夹、上一级文件夹、项目根目录以及跨文件夹的引用实例。同时提醒开发者,在WebStorm等开发工具中,应注意路径的服务器上下文环境,以确保资源正确加载。
摘要由CSDN通过智能技术生成

路径分为两种:相对路径和绝对路径

相对路径:相对于项目而言的路径。

绝对路径:在我们电脑硬盘上的路径。

一般写相对路径,因为我们的项目可能会改变地方,如果写绝对路径的话,项目每改一次地方就需要改一次地址,如果写地址的地方比较多的话,修改起来会相当麻烦。

我们需要写路径的地方一般有三个,一个是引用图片,一个是引用样式文件,一个是引用js文件。以<img>标签为例:

一、绝对路径:

例如在我的电脑上有一张图片,位置是:E:WebStormWorkHelloWorldhtmlyuyu3.png

那么我们在代码中就可以写成:<img src="E:WebStormWorkHelloWorldhtmlyuyu3.png">

f1a82ea2400dfc1487210b5db1166fa9.png

de859c1ca583c13dfa7f95ee02113947.png

6f770ab967e23e1d311aa1f6886f13dd.png

二、相对路径:

对于路径的写法,比较容易让人出错误。这是因为对路径的写法不明确的原因,首先我们要了解以下的符号代表什么。

/ html页面所在的文件夹

./ html页面所在的文件夹内部(相当于不写,直接写图片名字)

../ 页面所在文件夹的外面一层

下面我们就看看具体的路径需要怎么写:

1、显示同一文件夹下的图片(同级)。

3c4745f358a0b41f9b4834f3e5a5dd39.png

2、显示页面上一级图片(和页面所在文件夹同一级的图片)

721b75f429def418c79016aab304b2ea.png

bc1e4b84c0f935aecf1aae4c235d1f73.png

3、显示项目根目录下的图片

f632e99b0901cc415ee66cc8472fa096.png

edebd992677ee6e0456ae29b0ba6301e.png

4、在其它文件夹下的引用方式

54df073e73b61945b82cbb9314f9eb7a.png

d16403d5a38dba6d07e06a47db946a24.png

ec2c5ddbd1225a43507343762866a7a2.png

caaa54cbaed941a9964540e99a1b3090.png

注意事项:

我在测试的时候使用的是webstrom开发工具,点击右上角快速打开页面的时候页面是运行在服务器上的,webstrom自带服务器。所以,有需要测试绝对路径的朋友请注意这一点,不然图片会显示不出来的。

原文链接:web前端--路径问题_xishaoguo的博客-CSDN博客

原作者:二小1号

出处:CSDN

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值