我的目标是使用图像作为 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。那我该怎么办?
试试这个。
<img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" >
这应该是你可以拥有你想要的高度和宽度的窍门。
确保为 src 字段提供正确的路径。
你可以试试这个方法 -
<button (click)="click()" block>
<img src="assets/img/scan_btn.png">
</button>
离子2
然后将您的图标放入 www/assets/images
<img src="assets/images/icon.png" style="width : 100% ; height : 100%" ng-click="nextpage()" >
<a routerLink="/user/details" routerDirection="forward">
<img src='assets/images/icon.png' />
</a>
离子5
您还可以使用 ion-card 元素:
<ion-card class="welcome-card" [routerLink]="['/tabs/tab3']">
<ion-img src='/assets/VC-Button-calendario-01.svg'></ion-img>
</ion-card>
检查这个
<button ng-mousedown="class='fb-down'" ng-mouseup="class='fb-up'" class="{{class}}"> <img src="your_image_path" alt="" title="" /> </button>
如果您在 css 和任何方面仍然遇到任何问题,请告诉我。
谢谢
有了这个,您可以使用图像按钮进行路由。
<button onclick="location.href='/pageToRoute/param'" block>
<img src="imagePath/imageName.jpg">
</button>
您可以将图像包装在 div 容器中。
<div (click)="yourFunction()">
<img>
</div>
这比离子按钮的优点是图像本身不会改变并且没有蓝色边框。
我向 Chatgbt 询问了我的代码,我认为 RUTER-LINK 是更好的解决方案。
<router-link to="/home" routerDirection="forward">
<img alt="LEN Logo" id="header_logo" height="40" src="/public/favicon.png" href="../../views/HomePage.vue">
</router-link>
参见笔@http://codepen.io/jeggu96/pen/NRaxj 希望有帮助:)
<button ion-button clear (click)="nextPage()"><img src="image path" alt=" " /></button>