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>

Answer 3

离子2

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

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

Answer 4

检查这个

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

如果你仍然在css中遇到任何问题，并且在任何时候请告诉我。

由于

Answer 5

离子4

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

Answer 6

使用此按钮，您可以使用图像按钮进行布线。

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

Answer 7

离子5

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

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

Answer 8

查看笔@ http://codepen.io/jeggu96/pen/NRaxj 希望它有帮助:) INSERT INTO city_mix (city1,city2) select t1.cityName,t2.cityName from Table1 t1 join Table1 t2 on t1.cityName != t2.cityName;

如何在离子

8 个答案:

离子4