如何从文件夹中添加 HTML 中的图像 - HTML

在 HTML 中添加图像是很常见的操作。通常，我们会将图像文件保存在本地文件夹中，并在 HTML 文件中添加引用路径来显示图像。在本文中，我们将介绍如何从文件夹中添加 HTML 中的图像。

1. 将图像文件保存在文件夹中

首先，我们需要将要添加到 HTML 文件中的图像文件保存在本地文件夹中。可以在任何位置创建此文件夹，只要您能够在 HTML 文件中正确引用它就可以了。例如，我们可以将文件夹保存在项目根目录下：

my-project/
  images/
    my-image.jpg
  index.html

2. 在 HTML 文件中添加引用路径

一旦图像文件保存在本地文件夹中，将其添加到 HTML 文件需要两个步骤：

2.1 使用 <img> 标签

使用 <img> 标签将图像添加到 HTML 文件中。以下是一个示例：

<img src="images/my-image.jpg" alt="My Image">

这里，src 属性是您要添加的图像文件的路径。在我们的例子中，它是 images/my-image.jpg。alt 属性是在图像无法加载时显示的替代文本。将其设置为描述图像的简短文本非常重要。

2.2 指定图像路径

您需要在 src 属性中指定图像的路径，以引用保存在本地文件夹中的文件。在我们的例子中，路径为 images/my-image.jpg。确保路径与实际存储在本地文件夹中的图像文件路径相匹配。

3. 测试图像

保存 HTML 文件并在浏览器中打开测试图像是否正确显示。

以上就是从文件夹中添加 HTML 中的图像的方法。

结论

使用本文中提到的简单步骤，您可以从本地文件夹中添加图像到 HTML 文件中。这是在 Web 开发中非常基础的操作。只要做好以下几点：

• 将图像保存在本地文件夹中；
• 在 HTML 文件中使用 <img> 标签引用路径；
• 测试图像。

您就可以添加图像并使其在 Web 页面中正确显示。

参考文献:

• MDN Web 文档: <img> 标签
• dev.to: How to Add Images to your HTML Pages from a Folder