在 HTML 中的按钮中嵌入图像
本文将讨论在 HTML 中的 <button> 元素中嵌入图像的几种方法。表示在 HTML 按钮内修复或设置图片。
使用 <button> 标签内的 <img> 标签在 HTML 按钮中嵌入图像
这个 <img> 标签用于在 HTML 页面上嵌入图像。图像并没有直接放入网页中；图像通过给定的路径链接到网页。此标签为特定图像生成一个空间。该标签有两个必需的属性，即 src 和 alt。我们可以使用 HTML 中的 <button> 标签创建一个可点击的 HTML 按钮。将 <img> 标签放置在 <button> 标签内会创建一个可点击的 HTML 按钮，其中嵌入了图像。
例如，在 HTML 正文中，打开 <button> 标记。将 type 指定为 button。然后，打开 <img> 标签并在 src 属性中指定图像 URL。接下来，将 height 和 width 分别设置为 80 和 100。最后，在以下几行中关闭所有先前打开的标签。
在下面的示例中，我们创建了一个 <button> 元素并在其中插入了一个图像以嵌入按钮内。我们使用 URL 缩短器将图像的短 URL 放在 src 标签中。因此，可以在 HTML 中创建带有图像的按钮。
示例代码：
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
使用 <input type="image"> 标签在 HTML 按钮中嵌入图像
<input> 标签指定了一个输入字段，我们可以在其中输入我们的数据。HTML 中允许使用多种输入类型和控件组件。其中一些是 <input type="button">、<input type="color">、<input type="email">、<input type="text">。我们可以将 type 属性设置为 image 并设置 src 以在输入类型中嵌入图像。它将起到按钮的作用。
例如，在 HTML 正文中，打开 <input> 标记并将 type 指定为 image。然后，在 src 属性中输入图像 URL。接下来，编写 style 属性并将 border 设置为 double。此外，将高度和宽度添加为 80 和 170。然后，关闭输入标签和所有之前打开的标签。
下面的示例说明了在 HTML 页面上嵌入图像的方法。<type="image"> 标签指定我们在工作中插入或使用图像。我们使用内联 CSS 来设置图像的边框、高度和宽度。我们这样做是为了使图像看起来更像一个按钮。值 double 指定在图像按钮外使用双边框。高度和宽度帮助图像进入一个确定的大小。如果我们不指定图像的高度和宽度，加载图像时页面可能会闪烁。通过这种方式，我们可以在 HTML 按钮中嵌入图像。
示例代码：
<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn