Не удается сделать кнопку изображения в мини-программе WeChat

Question

Я хочу сделать кнопки с иконками изображений в мини-программе WeChat. Например, кнопки воспроизведения / паузы, следующего, предыдущего в медиаплеере. Я пробовал как 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")
  }
})

Для получения более подробной информации вы можете обратиться к: Реализовать кнопку изображения в программе WeChat Mini.