早上好，我正在嘗試將圖像放入離子按鈕中，但我沒有成功，我已經嘗試了所有方法，有人對本機按鈕有任何正確的解決方案嗎？<ion-button class="home-link link-2" style="background-image:url('img/myImage.jpg'); background-size:cover" routerLink="/schedule"> AGENDA</ion-button>
3 回答
楊魅力
TA貢獻1811條經驗 獲得超6個贊
您的按鈕默認是彩色的，嘗試將該屬性添加color="none"到您的ion-button對象中，如下所示：
<ion-button
color="none" // <-- Add this line
class="home-link link-2"
style="background-image:url('img/myImage.jpg'); background-size:cover"
routerLink="/schedule"
>
AGENDA
</ion-button>
這樣您就可以看到默認背景顏色下方的圖像。希望這可以幫助 ！
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
創建一個選擇器類并向其中添加背景圖像：
#AddImg {
background-image: url(' http://placekitten.com/301/301');
height: 100px;
width: 100px;
}
<ion-button class="home-link link-2" id="AddImg" style=" background-size:cover" routerLink="/schedule">AGENDA</ion-button>
或者
像這樣的東西：
ion-button {
background-image: url(' http://placekitten.com/301/301');
}
<ion-button class="home-link link-2" id="AddImg" style=" background-size:cover" routerLink="/schedule">AGENDA</ion-button>
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
下面的代碼在 Ionic 4 中對我有用。
<ion-button color="clear" class="home-link link-2" routerLink="../../tab2">
<ion-img src='path/to/image.png'></ion-img>
</ion-button>
圖像將僅顯示在按鈕內。
如果您想顯示大圖像，您可以根據需要編輯style圖像。ion-button
您routerLink提供的需要根據您所在的當前頁面進行對齊，否則您可以根據路由模塊給出組件的絕對路徑。
- 3 回答
- 0 關注
- 187 瀏覽
添加回答
舉報
0/150
提交
取消