html - 微信小程序无法制作图片按钮

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 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")
  }
})

更多详情可以参考：微信小程序实现图片按钮