调用下级目录的图片
在web开发中，图片的使用是非常常见的。但是，如果我们的图片文件不在当前目录下，我们该如何才能正确地把它引用到我们的页面中呢？在下面的文章中，我将向大家详细介绍如何使用html语言调用下级目录的图片。
1. 相对路径的使用
在网页中，引用图片的路径不仅支持绝对路径，还支持相对路径。下面介绍一下相对路径和绝对路径的区别：
绝对路径：是以http://开头的完整的URL地址，表示在服务器上的路径。
相对路径：是相对于当前HTML文件的路径。
下面我们来看一下，如何使用相对路径调用下级目录的图片。
相对路径是相对于当前HTML文件的路径，也就是说，先要知道该HTML文件相对于其图片文件所在文件夹的位置。例如我们有这样一个文件夹结构：
- root
- index.html
- css
- style.css
- images
- picture.jpg
以上是一个网站的文件夹目录树，我们可以看到：
- 根目录下有一个index.html文件，一个css文件夹和一个images文件夹。
- 在css文件夹下有一个style.css文件。
- 在images文件夹下有一个picture.jpg文件。
相对路径是以当前HTML文件所在的位置为基础，来计算图片在相对路径中的位置。例如，我们现在在index.html文件中需要引用images文件夹下的picture.jpg文件，我们应该怎么做呢？
我们需要回到根目录下，然后再找到images文件夹，最后找到picture.jpg文件，所以我们可以这样写：
<img src="images/picture.jpg">
上面的代码中，<img>标签中的src表示图片的路径，"images/picture.jpg"表示相对于index.html文件的路径。这时，浏览器会在当前目录下寻找"images"文件夹，然后再找到"picture.jpg"这个文件。
2. 绝对路径的使用
相对路径适用于同一个站点的图片引用，对于站点之外的图片的引用，我们需要使用绝对路径。绝对路径是以网站根目录为起点，计算文件路径的方式。在实际使用中，可以使用相对路径或绝对路径，选择哪种方式完全取决于实际需求。
例如，我们假设我们的网站根目录是http://www.example.com/，图片的网址是：http://www.example.com/images/picture.jpg。那么我们可以这样引用：
<img src="http://www.example.com/images/picture.jpg">这种方式也可以使用文件系统的路径，例如：
C:/website/images/picture.jpg但是需要注意的是，这种路径只适合在本机上查看文件，如果上传到服务器上，将不再适用。
3. base标签的使用
base标签可以设置整个页面的基础链接地址，所有链接都以此为基础。现在我们来看一个例子：
<html>
<head>
<base href="http://www.example.com/">
<title>调用下级目录的图片</title>
</head>
<body>
<img src="images/picture.jpg">
</body>
</html>
在上面的代码中，我们利用base标签将页面的基础地址设置为http://www.example.com/，这样，我们在页面的其他地方就可以直接使用images/picture.jpg来引用picture.jpg图片了，而无需使用绝对路径或相对路径。
4. 总结
以上就是关于如何使用html调用下级目录的图片的全部内容。在实际开发中，我们可以根据实际需求选择相对路径、绝对路径或者base标签来处理路径问题，具体需要根据具体情况而定。希望这篇文章能够对您有所帮助！