HTML 如何将计算机中的图像添加到HTML页面中

通过遵循以下指示，将图片从计算机添加到HTML页面中。在项目目录中创建一个新文件夹，然后将图片放在其中。通过将HTML img标签的src属性设置为图片文件的位置，比如“文件夹/图片.jpg”，来插入一张照片。确保允许的图片格式（JPEG，PNG等）。’alt’参数可以选择性地填写一个有用的标题，或者留空以显示图片。在在线查看页面之前，必须将HTML文件和图片都上传到Web服务器上，以便正确查看图片。您可以选择为’alt’属性提供有用的标题，或者留空以显示图片。在在线查看页面之前，必须将HTML文件和图片都上传到Web服务器上，才能正确查看图片。

使用的方法

本地文件路径
数据URL方案
在线URL
文件输入元素（上传）

本地文件路径

在尝试将来自本地计算机的图片集成到HTML页面中之前，请确保将图片文件首先放在项目目录中的文件夹中。然后，在HTML代码中使用img标签，并在’src’属性中指定图片的相对文件位置（例如，文件夹/图片.jpg）。如果文件位置正确，当在Web浏览器中查看时，图片将显示在HTML页面上。使用这种简单的技术，您可以轻松地将本地照片整合到您的在线项目中，提升整体的审美效果和用户体验。使用计算机上的图像直接在您的网站上使用此方法进行方便有效的图像集成。

步骤

在您的项目目录中创建一个未使用的文件夹来存储图片，以防尚未创建。
确保图片文件处于支持的格式（如JPEG或PNG）中，并将其保存在新的文件夹中。
打开您选择的文本编辑器。
打开现有的HTML文件或创建一个新的文件，标题为“index.html”，如果您想在其中添加图片。

HTML 如何将计算机中的图像添加到HTML页面中

在HTML记录中找到您需要图片出现的位置。
在该区域中，包含以下代码片段 −

<img src="folder/image.jpg" alt="Image Description">

保存HTML文件。
要查看已添加图像的页面，请在Web浏览器中打开HTML文件。

数据URL方案

在使用数据URL方案将图像添加到HTML页面之前，将图像转换为Base64编码的字符串。然后，图像数据应直接包含在URL中（例如：“data:image/png;base64,base64data”），并使用<img>标签的<src>属性设置为数据URI。使用这种技术，不需要外部文件引用，因为图像直接嵌入在HTML中。这适用于较小的图像或无法使用服务器端存储的情况，因为它可能会增加页面大小和加载时间。

步骤

从图像创建Base64编码的字符串。
要编辑HTML文件，请打开它。
找到应包含图像的HTML区域。
在图像的src属性中放置数据URI –
以“data:image/”开头，然后是图像的类型（如“png”或“jpeg”）。
添加短语“;base64,”以表示Base64数据即将到来。
添加第2步获取的Base64编码的图像数据。
保存更改到HTML文件。
为了在页面上查看图像，请在Web浏览器中打开HTML文件。

在线URL

为了将图片从您的计算机添加到HTML页面并使用Internet URL，您必须将图片转移到图片托管服务或云存储中。一旦发布了图像，您将获得其URL，并在您的HTML内容中加入<img>标签。在src字段中放置图像的URL；例如，“https://example.com/image.jpg”。当HTML文档加载时，图像将从给定的URL下载并显示在网站上。使用外部来源的照片而无需在服务器上实际托管它们，现在变得简单，感谢这种共享和管理方法。要在网页上显示照片，只需在img>标签中包含图像的URL。

步骤

上传图像的图像托管服务
- 选择云存储公司或图像托管服务。
- 向托管服务从计算机上传图像文件。
- 您将从托管服务收到提交的图像的URL。
- 通过写下或复制它来获取图像的URL。
创建HTML代码
- 创建一个HTML文件并将其放置在项目目录中。
- 在HTML代码中使用<img>标签。
- 将标签的src属性更改为图像的URL（例如，”https://example.com/image.jpg”）。
打开和保存 –
- 使用合适的名称和扩展名（例如，”index.html”）保存HTML文档。
- 打开一个Web浏览器和HTML文件。
显示图像 –
- 当HTML页面加载时，浏览器将从指定的URL检索图像并在页面上显示。

文件输入元素（上传）

使用文件输入元素（上传）的方法，通过在HTML表单中包含带有”type=”file””属性的<input>元素，从您的计算机上传图像到HTML页面。现在，用户可以使用创建的文件输入字段从他们的计算机选择图像。要允许文件上传，请在<input>元素周围放置一个<form>元素，并将’enctype’属性设置为”multipart/form-data”。当用户选择图像并提交表单时，图像将被上传到服务器。上传的图像然后可以在HTML页面上运行和显示。

步骤

在HTML中创建一个form元素，其enctype属性设置为”multipart/form-data”。
为了启用文件选择，在表单内部提供一个type=”file”的输入元素。
为了知道何时选择了文件，在文件输入框中包含一个事件监听器。
一旦选择了文件，表单应该被提交。
在表单提交后，使用正确的服务器端脚本（如PHP或Python）来处理上传的文件。
服务器上分配的文件夹现在应该包含上传的图片。
为上传的图片创建一个特殊的文件路径或URL。
响应客户端请求时，提供上传图片的URL或文件位置。
在客户端上使用接收到的URL或文件路径，使用HTML页面上的元素来显示图片。

结论

总结起来，有多种方式可以将个人电脑上的图片添加到HTML页面中，每种方式都有其优势和应用。本地文件路径方法可以直接将项目目录与个人电脑上的照片集成在一起。通过Data URL Scheme，图片以Base64编码字符串的形式嵌入到HTML中。通过在线URL技术，将图片上传到外部服务器，然后使用其URL。使用HTML表单中的输入字段，用户可以使用文件输入元素（上传）方法选择和上传照片。根据项目对服务器、便利性和安全性的需求，选择最适合的方法。