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

我的目标是使用图像作为离子button。 我第一次使用a-tag链接页面。 但是当我点击图片。 没有button激活的效果。 所以我切换到button标签

我曾尝试使用

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

但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字段的正确path。

Answer 2

离子2

然后将您的图标在www / assets / images中

 <img src="assets/images/icon.png" style="width : 100% ; height : 100%" ng-click="nextpage()" > 

Answer 3

检查这个

<button ng-mousedown="class='fb-down'" ng-mouseup="class='fb-up'" class="{{class}}"> <img src="your_image_path" alt="" title="" /> </button>

如果你仍然面临任何问题，并在任何情况下让我知道。

谢谢

Answer 4

你可以试试这个方法 –

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

Answer 5

看到笔@ http://codepen.io/jeggu96/pen/NRaxj希望它有助于:) <button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>