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

Posted 2023-03-06

【中文标题】如何在离子中使用图像作为按钮

【英文标题】：How to use image as button in ionic

【发布时间】：2016-10-04 09:22:56

【问题描述】：

我的目标是在离子中使用图像作为按钮。我首先使用 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。那我该怎么办？

【参考方案1】：

试试这个。

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

这应该是你可以随心所欲地拥有高度和宽度的技巧。

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

【讨论】：

我试过了，但在我松开手指后会发生 ng-click。我希望图像背景在触摸按钮时稍微改变其不透明度。就像触摸离子项目时一样。当我按住手指时会有变化。这是不同的。

如果你想要喜欢 ion 项目然后把这个图像放在 ion-item 中，这样就和你想的一样像<ion-item> <img..... > </ion-item>让它在列表中只有一个项目

【参考方案2】：

你可以试试这个方法-

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

【参考方案3】：

离子 2

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

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

【讨论】：

它似乎在 ionic 2 中使用“(click)”而不是“ng-click”

您也可以使用 (tap) 或 (click) 代替 Ionic 3 的 ng-click

【参考方案4】：

离子 4

<a routerLink="/user/details" routerDirection="forward">
   <img src='assets/images/icon.png'  />
</a>

【参考方案5】：

离子 5

你也可以使用 ion-card 元素：

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

【参考方案6】：

检查一下

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

如果您仍然在 css 和任何方面遇到任何问题，请告诉我。

谢谢

【参考方案7】：

有了这个，你可以使用图片按钮进行路由。

<button onclick="location.href='/pageToRoute/param'" block>
   <img  src="imagePath/imageName.jpg">
</button>

【参考方案8】：

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