logo标签列表

如何在ionic中使用图片作为按钮

androidioscssangularjsionic-framework
20

我的目标是在ionic中使用图片作为按钮。我最初使用了a标签来链接页面。但是当我点击图片时，没有激活的按钮效果。所以我切换到了button标签。

我已经尝试过使用

<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 上无法正常工作。那我该怎么办？

9个回答
13

试一试。

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

这应该能起作用，你可以根据自己的需要设置高度和宽度。

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

我尝试了一下，但是 ng-click 在我松开手指后才发生。在我触摸按钮时，我希望图像背景的不透明度稍微改变。就像触摸 ion-item 时一样。当我按住手指时会发生变化。这是不同的。 - Wakeme UpNow
如果您想在ion-item中添加图像，则可以将其放置在ion-item中，这样它就会与您想象的一样，例如 <ion-item> <img..... > </ion-item>。让列表中只有一个项目。 - Mohan Gopi
这个不起作用... - Mark Baumann
12

你可以尝试这种方法 -

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

Ionic 5

You can also use ion-card element :

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

Ionic 2

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

<img src="assets/images/icon.png" style="width : 100% ; height : 100%" ng-click="nextpage()" >
3
看起来在Ionic 2中可以使用"(click)"代替"ng-click"。 - William Terrill
你可以在Ionic 3中使用(tap)或(click)代替ng-click。 - Saurabh
2

Ionic 4

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

请检查这个

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

如果您在 CSS 或其他方面仍然遇到任何问题，请告诉我。

谢谢

0

你可以将图片包裹在一个 div 容器中。

<div (click)="yourFunction()">
    <img>
</div>

这种方法相比于ion-button的优点在于，图像本身不会被更改且没有蓝色边框。

0

通过这个，您可以使用图像按钮进行路由。

<button onclick="location.href='/pageToRoute/param'" block>
   <img  src="imagePath/imageName.jpg">
</button>
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接