web-dev-qa-db-ja.com

ionicでボタンとして画像を使用する方法

私の目的は、イメージをイオンのボタンとして使用することです。最初にaタグを使用してページ間をリンクしました。しかし、私が画像をクリックしたとき。ボタンを有効にする効果はありません。だから私はボタンタグに切り替えます

私は使用してみました

<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では動作しません。だから私は何をすべきですか？

androidioscssangularjsionic-framework
13
Wakeme UpNow

これを試して。

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

これにより、高さと幅を自由に設定できます。

Srcフィールドへの正しいパスを指定してください。

10
Mohan Gopi

あなたはこの方法を試すことができます-

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

イオン2

Www/assets/imagesにアイコンを配置してから

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

イオン4

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

これをチェックして

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

それでもcssとanyhtingで問題に直面している場合はお知らせください。

ありがとう

0
piyush jain

これにより、ルーティングに画像ボタンを使用できます。

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

イオン5

ion-card elementを使用することもできます：

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