Embed image in a <button> element 微信小程序 客服按钮

html - Embed image in a <button> element - Stack Overflow https://stackoverflow.com/questions/8683528/embed-image-in-a-button-element

You could use input type image.

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

It works as a button and can have the event handlers attached to it.

Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.

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

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

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;
}

<button id="close-image" open-type="contact" style="position:fixed; top:0;width: 40px;height:40px;;margin-left:calc(86%);top:calc(90%); background-color:red;padding:0px;">
<image src="{{localImgPath}}customerService.svg" style='width:50px;height:50px;' />
</button>