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

Question

我想在微信小程序上制作带有图片图标的按钮。例如，媒体播放器中的 play/pause、下一个、上一个按钮。我试过 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或打字稿文件中放入：

Page({

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

Cannot make an image button on WeChat mini-program