如何在离子中使用图像作为按钮

Question

我的目标是使用图像作为离子按钮.我首先使用a-tag在页面之间进行链接.但是当我点击图像时.没有按钮激活效果.所以我切换到按钮标签

我试过用

<button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"></button>

但按钮高度保持不变.因此它不会显示完整尺寸的图像.我试过了

style="font-size:100px;"

和

style="line-height:100px;"

但似乎没有任何效果.

我也尝试添加自己的CSS

.Test-up {
  border :none;
  padding : 0px;
}

.Test-down {
  opacity: 0.5;
  border:0px;
  padding: 0px;
}

并将以下代码添加到我的index.html中

<button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#">

以及代码到我的控制器

$scope.class = "Test-up";

正如我从http://codepen.io/Leiron/pen/ztawA尝试 但它不适用于ios或android.所以我该怎么做？

Answer 1

试试这个.

 <img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" >

这个诀窍你可以根据自己的意愿拥有高度和宽度.

确保给出src字段的正确路径.

Answer 2

你可以尝试这种方式 -

<button  (click)="click()" block>
     <img src="assets/img/scan_btn.png">
</button>