在 <button> 元素中嵌入图像

您可以使用输入类型的图像。

<input type="image" src="http://example.com/path/to/image.png" />

它作为一个按钮工作，并且可以将事件处理程序附加到它上面。

或者，您可以使用 css 为您的按钮设置背景图像的样式，并适当地设置边框、边距等。

<button style="background: url(myimage.png)" ... />

试试这个

   <input type="button" style="background-image:url('your_url')"/>

按钮不直接支持图片，而且你所做的是链接()

图像是使用 BACKGROUND- 图像属性样式在按钮上添加的

还可以使用标记指定 repeat 和其他属性

例如: 一个基本的图像添加到一个按钮将有这样的代码:

    <button style="background-image:url(myImage.png)">

和平

如果图像是一段语义数据(例如配置文件图片) ，那么在 <button>中使用一个 <img>元素，并使用 CSS 来调整 <img>的大小。如果图像只是一种使按钮视觉上令人愉快的方法，使用 CSS background-image来设计 <button>(不要使用 <img>)。

演示: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS:

button {
display: inline-block;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 104px;
}


#close-image img {
display: block;
height: 130px;
width: 100px;
}


#close-CSS {
background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
background-size: 100px 130px;
height: 134px;
width: 104px;
}

产出:

在项目中添加名为 Images 的新文件夹。将一些图像放入“图像”文件夹。那就没问题。

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">

将图像放入按钮的最简单方法是:

<button onclick="myFunction()"><img src="your image path here.png"></button>

这将自动调整按钮的大小，以图像的大小。

为什么不使用具有 onclick属性的图像？

例如:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

尝试像这样的格式和使用“宽度”属性来管理图像的大小，很简单。JavaScript 也可以在元素中实现。

<button><img src=""></button>

主题是“嵌入图像在一个按钮元素”，以及使用 简单的 HTML的问题。我使用 span 标记来完成这项工作，就像在 bootstrap 中使用象形文字一样。我的图像是16x16px，可以是任何格式。

下面是解答这个问题的简单 HTML:

<button type="button"><span><img src="images/xxx.png" /></span>&nbsp;Click Me</button>

使用图像作为按钮创建一个按钮下载按钮图像，然后打开它在油漆和笔记下来的顶部左侧和右侧底部坐标

`<Img src =" button.jpg" usemap=" #button" >.
<map name = " # button " >.
<area shape ="rect" coords = " Top- left , bottom right "
href = " page you want to open by button" > `

您可以使用多个 < area > 标记从一个图像创建不同的按钮。

注意: 这个方法有一个问题，如果你试图改变图像的高度和宽度，像素移动和按钮不起作用

为此，通过 Photoshop 或任何其他照片编辑器外部改变按钮图像大小

就是这样，你已经创建了你的按钮没有 java 脚本和几行代码

一般答案:

<button style="background: url('icons/close.png'); background-size:cover"></button>

由于目前选择的答案有一些问题，张贴这个答案可以节省人们的麻烦。

确保你的按钮有足够的宽度/高度来查看你的图像，并且可以添加一个“背景位置”属性来使你的图像显示出来。

反应版本:

<button style=\{\{backgroundImage: "url('icons/close.png')"}}></button>