微信小程序无法制作图片按钮答案

【问题标题】：Cannot make an image button on WeChat mini-program微信小程序无法制作图片按钮
【发布时间】：2020-02-24 13:37:50
【问题描述】：

我想在微信小程序上制作带有图片图标的按钮。例如，媒体播放器中的播放/暂停、下一个、上一个按钮。我尝试作为 html：

<button>
    <image src="../image/play.svg"></image>
</button>

但我在按钮上看不到任何图像。如何制作图片按钮？

【问题讨论】：

【解决方案1】：

对于图像按钮，只需使用<image> 标签。例如：

<image src="../image/play.svg" bindTap="play()"></image>

并使用 WXSS 设置一些类似按钮的样式。

image {
    background: lightblue;
}
image:hover {
    background: lightgrey;
}

当然，您的图标图像应该具有透明背景。

【讨论】：

【解决方案2】：

我已经做到了

<button bindtap = "mytap">
     <image src = '../../image/search-icon.png' style=" width: 35rpx;height: 35rpx;"></image>
     Search
</button>

你也可以在按钮里面只放图片元素

<button bindtap = "mytap">
     <image src = '../../image/search-icon.png' style=" width: 35rpx;height: 35rpx;"> </image>
</button>

在 javascript 或 typescript 文件中放置：

Page({

  //...
  mytap(){
    console.log("clic")
  }
})

【讨论】：