htmlwechatwechat-miniprogram

Cannot make an image button on WeChat mini-program

I want to make buttons with image icons on WeChat mini-program. For example, play/pause, next, previous buttons in media player. I tried as html:

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

But I cannot see any image on button. How to make an image button?

Solution

  • For image buttons, just use <image> tag. For example:

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

    And set some button-like styles using WXSS.

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

    Of course, your icon image should have transparent background.