对image标签路径的再认识

一.绝对路径

绝对路径：绝对路径是电脑的盘符存储与访问的具体地址,它是最清晰的地址信息，根据图片在你电脑中的存在位置去读取相应的图片信息。

E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">

上述的代码就是详细的操作方法

二.相对路径

相对路径：两者相对关系，两者在同一路径下可以直接访问，它具有以下的几种关系：

子级关系: /
父级关系: ../
同级关系: ./

上述几种关系体现出当图片所在的位置处于不同情况下的集中访问的方式，下面我们一一来介绍这几种关系

同级关系

下面先展示我的代码:

<!DOCTYPE html>
  <html>
    <head>
        <title>
          我的网页
        </title>
    </head>
    <body>
        <img src = "2.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="400px" title="小姐姐">
    </body>
  </html>

在这里2.小姐姐图片和代码是在同一个文件夹里面的，所以可以直接使用名称来访问该图片，或者可以添加./也是同样的效果。文件结构如图：

运行的结果展示:

子级关系

下面展示我的代码:

<!DOCTYPE html>
  <html>
    <head>
        <title>
          我的网页
        </title>
    </head>
    <body>
        <img src = "./图片/1.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="500px" title="小姐姐">
    </body>
  </html>

在这里我们首先需要明白文件的结构是怎么样的：在这里的话，我们可以看到就是image标签的使用.html文件是和上面图片文件夹是同级的，在这里的话，我们就可以通过(./或者直接使用文件名称)在image标签的使用.html文件中访问统计图片文件夹中的内容，在图片文件夹中要访问1.小姐姐.jpg图片的话，那么就要在访问图片文件夹的基础上加上/来访问子级文件的内容。所以，综上所述，我们可以的写法有下面两种：

<img src = "./图片/1.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="500px" title="小姐姐">
<img src = "图片/1.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="500px" title="小姐姐">

下面是展示的效果图:

父级关系

下面来展示我的代码：

<!DOCTYPE html>
  <html>
    <head>
        <title>
          我的网页
        </title>
    </head>
    <body>
        <img src = "../4.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="600px" title="小姐姐">
    </body>
  </html>

下面我将给出我的项目文件结构来清晰的分析父级关系:

在这个项目机构中，我要在代码集合的文件夹中的image路径的详细描述.html文件中访问4.小姐姐.jpg这个张图片的话，我们就应该使用../,首先4.小姐姐,jpg是和代码集合是同级的，所以如果我想在image路径的详细描述.html文件中访问的话，那么我首先是要返回上一级的，那么就利用../返回到4.小姐姐.jpg这一级文件，也就是返回到了代码集合这一文件，根据同级关系中可以利用./或者直接使用名称的话，我们就可以很快的编写出下面的代码来完成图片的访问:

<img src = "../4.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="600px" title="小姐姐">
<img src = ".././4.小姐姐.jpg" alt = "没有其他的信息" width="300px" height="600px" title="小姐姐">

上述的两种访问方式都是可以的，但是为了简洁，个人比较推荐的是第一种方法，就理解方面的话，还是第二种更能理解透彻父级关系的定义。

三.网络路径

直接给出具体的网络地址就可以，在运行程序的时候，编译器在联网的情况下会自动去网上加载图片(前提是网络上的这张图片的地址是保存不变的),具体的演示代码如下：

<!DOCTYPE html>
  <html>
    <head>
        <title>
          我的网页
        </title>
    </head>
    <body>
        <img src = "https://pic4.zhimg.com/v2-8b3b56e6e138959917a93189c6b9e8bb_r.jpg" alt = "没有其他的信息" width="300px" height="600px" title="小姐姐">
    </body>
  </html>

这里不需要管项目文件的结构，因为该图片的文件不是保留在本地电脑的，而是存储在网上的，所以需要一个网络地址就可以了，下面是展示图:

下面我来补充一下网络上的图片的地址该如何查找：

在其中随便选择一张图片并且鼠标右键单击选择第一个选项(在新标签页中打开图像)，现在就会出现另外一个界面:

微信图片编辑_20230906154351.jpg 红色箭头所指的位置就是我们所要的网络地址，直接复制粘贴到src处就可以了。

四.个人总结

通过对image标签中的路径的了解，我们能够掌握访问图片的方式不一定要将网上的图片下载下来才能访问，我们了解到图片下载本地电脑之后，访问的时候不一定需要用绝对路径访问，我们也可以用相对路径来访问，在相对路径中，我们需要明白和了解子级关系，父级关系，同级关系。

小白零基础入门HTML5第四天