Как использовать изображение как кнопку в ионном

Моя цель - использовать изображение в виде кнопки в ионной форме. Сначала я использовал тег для ссылки между страницами. Но когда я нажал на изображение. Эффект кнопки не активируется. Поэтому я переключаюсь на тег

Я пробовал использовать

<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.

Ответ 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()" >

Ответ 4

проверьте это

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

Если вы все еще сталкиваетесь с какой-либо проблемой в css и в anyhting, дайте мне знать.

Спасибо

Ответ 5

Ионная 4

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

Ответ 6

При этом вы можете использовать кнопку изображения для маршрутизации.

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

Ответ 7

Ионная 5

Вы также можете использовать элемент ионной карты:

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

Ответ 8

См. pen @http://codepen.io/jeggu96/pen/NRaxj Надеюсь, это поможет:) <button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>