迹忆客 专注技术分享

本文探讨了在 HTML 中从文件夹添加图像的不同方法。

使用 <img> 标签从 HTML 文件夹中添加图像

如果我们在系统中本地保存了图像，则可以轻松地将其添加到 HTML 中。 我们可以使用 <img> 标签并在 src 属性中指定图像的路径。

虽然步骤很简单，但有时网页上不显示图像。 出现该问题的原因多为图片路径错误，浏览器无法定位到图片。

因此，我们必须在 src 属性中设置正确的图像路径。

让我们考虑以下结构。

HTML_project
├── image1.jpg
└── index.html

在这里，HTML 文件和图像位于同一目录中。

例如创建 <img> 标签，写入路径image1.jpg插入一张图片。 我们可以使用 alt 属性添加替代文本。

在某些情况下，图像可能不会显示。 因此，让用户知道图像的含义是有意义的。

显示图像时，不显示替代文本。

请注意 <img> 没有结束标签。

示例代码：

<img src="image1.jpg" alt="Mango Tree">

在上面的示例中，图像和 HTML 文件位于同一路径上。 因此，我们只在 src 属性中写入了文件名。

让我们考虑另一种情况，其中图像保存在目录中。

HTML_project
├── images
│   └── image1.jpg
└── index.html

对于这样的结构，我们可以通过两种方式设置图片的路径。

示例代码：

<img src="images/image1.jpg" alt="Mango Tree">

在这里，给定的路径告诉浏览器在 index.html 所在的同一目录中查找名为 images 的目录。 接下来，浏览器找到 images 目录并在其中找到 image1.jpg。

因此，图像会显示在浏览器中。

示例代码：

<img src="./images/image1.jpg" alt="Mango Tree">

这里路径开头的./表示从index.html所在位置开始的当前目录，即HTML_project。 然后定位到images目录，在网页中添加image1.jpg。

使用 CSS background-image 属性从 HTML 中的文件夹添加图像

此方法解释了在 HTML 中添加图像的另一种方法。 但是，图像文件路径约定与第一种方法类似。

唯一的区别是我们将使用 CSS background-image 属性而不是 <img> 标签。

让我们编写代码以使用 CSS 为以下结构上传图像。

HTML_project
├── image1.jpg
└── index.html

示例代码:

<div class = "div1" style="background-image: url('image1.jpg'); height: 200px; width: 200px;">

上面的代码片段创建了一个高度和宽度均为 200px 的背景图像。

同样，让我们考虑以下结构。

HTML_project
├── html
│   └── index.html
└── images
    └── image1.jpg

示例代码:

<div class = "div1" style="background-image: url('../images/image1.jpg'); height: 200px; width: 200px;">

这里，../ 表示在目录树中后退一步。 这意味着您已经从 images 目录移动到 HTML_project 目录，我们可以在其中找到 images 目录，然后在其中找到 image1.jpg 文件。

最后，显示图像。

这就是如何使用具有正确图像路径的 HTML 和 CSS 从 HTML 文件夹中添加图像。