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

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。所以我该怎么做？

原文由 Wakeme UpNow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个。

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

这应该是您可以根据自己的意愿拥有高度和宽度的技巧。

确保为 src 字段提供正确的路径。

原文由 Mohan Gopi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

离子 5

您还可以使用 离子卡 元素：

 <ion-card class="welcome-card" [routerLink]="['/tabs/tab3']">
    <ion-img src='/assets/VC-Button-calendario-01.svg'></ion-img>
</ion-card>

原文由 Mike D3ViD Tyson 发布，翻译遵循 CC BY-SA 4.0 许可协议