15 相对路径和绝对路径

最新推荐文章于 2024-07-29 00:15:00 发布

hello_sunny123

最新推荐文章于 2024-07-29 00:15:00 发布

阅读量509

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hello_sunny123/article/details/118094758

版权

前端专栏收录该内容

60 篇文章 3 订阅

订阅专栏

页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images) ,这时再查找图像,就需要采用"路径"的方式来指定图像文件的位置。

路径可以分为:

1.相对路径 (重要)

2.绝对路径

相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。

这里简单来说,图片相对于HTML页面的位置

相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

在这里插入图片描述

相对路径（三种很重要）

一.(同一级路径) 例如，案例文件夹是这样的，这里的img.jpg和11-同一级路径是在同一级下的两个文件，如果要在11中显示img.jpg

在这里插入图片描述

代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同一级路径</title>
</head>
<body>
    <img src="img.jpg"/>
</body>
</html>

运行结果：

在这里插入图片描述

二.(下一级路径) 如果我们要显示images文件夹下的图片img1.jpg，这时12-下一级路径和img1.jpg是属于上下级关系的，img1.jpg是12-下一级路径的下一级文件

代码为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下一级路径</title>
</head>
<body>
    <img src="images/img1.jpg"/>
</body>
</html>

运行结果为：

在这里插入图片描述

三.(上一级路径) 这里我们想用html文件夹里边的文件test.html来显示图片img.jpg,此时图片img.jpg是test.html的上一级文件，所以路径如下

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上一级路径</title>
</head>
<body>
    <img src="../img.jpg"/>
</body>
</html>

运行结果

在这里插入图片描述

绝对路径 (了解，不常用)

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

例如：“D:\zuomian\前端基础\案例\img.jpg” 或完整的网络地址"https://i0.hdslb.com/bfs/feed-admin/9db2df494ff733d3f9c969eb47dd90bcb29564c8.png@880w_388h_1c_95q"

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对路径</title>
</head>
<body>
    <img src="D:\zuomian\前端基础\案例\img.jpg">

    <img src="https://i0.hdslb.com/bfs/feed-admin/9db2df494ff733d3f9c969eb47dd90bcb29564c8.png@880w_388h_1c_95q">
</body>
</html>

运行结果：

在这里插入图片描述

hello_sunny123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
15 相对路径和绝对路径

页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images) ,这时再查找图像,就需要采用"路径"的方式来指定图像文件的位置。路径可以分为:1.相对路径2.绝对路径相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于HTML页面的位置相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。一.例如，案例文件夹是这样的，这里的img.jpg和11-同一级路径是在同一级下的两
复制链接

扫一扫

专栏目录