如何在HTML页面插入图片

图片可以通过帮助读者更好地理解网页内容来使内容更有趣。

我们可以将图片插入HTML页面中。要在HTML页面中插入图片，使用<img>标签。这是一个空标签，仅包含属性，因为不需要闭合标签。

我们应该在<body>...</body>标签中使用<img>标签。<img>标签指定要在HTML文档中显示的图片。

<img>标签有两个属性：

src - 添加图片源，即图片的URL（文件的位置）。
alt - 添加备用文本，width用于添加宽度，height用于添加图片的高度。

图片不是技术上插入到网页中的；图片是与网页链接的。<img>标签为图片创建了一个空间。

语法

以下是在HTML页面中插入图片的语法。

<img src="url" alt="alternatetext">

示例

以下是向HTML页面添加图片的示例程序。

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg">
</body>
</html>

现在让我们看看如果用户由于网络连接缓慢或者 src 属性错误而无法查看图像时，alt 属性（替代文本）是如何工作的。alt 属性的值描述了图像的属性。

示例

在下面的示例程序中，我们将指定一个不正确的路径来插入在 HTML 页面中的图像，并观察 alt 属性的工作方式。

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="search engine image" >
</body>
</html>

文本“搜索引擎图像”是当无法查看图像时图像的替代文本。

示例：更改图像大小

我们还可以使用style属性来更改图像的大小，即图像的高度和宽度。以下是更改图像大小的示例程序：

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="50px" width="50px">
</body>
</html>