早上好，我正在嘗試將圖像放入離子按鈕中，但我沒(méi)有成功，我已經(jīng)嘗試了所有方法，有人對(duì)本機(jī)按鈕有任何正確的解決方案嗎？<ion-button class="home-link link-2" style="background-image:url('img/myImage.jpg'); background-size:cover" routerLink="/schedule"> AGENDA</ion-button>
3 回答
楊魅力
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊
您的按鈕默認(rèn)是彩色的，嘗試將該屬性添加color="none"到您的ion-button對(duì)象中，如下所示：
<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>
這樣您就可以看到默認(rèn)背景顏色下方的圖像。希望這可以幫助 ！
墨色風(fēng)雨
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊
創(chuàng)建一個(gè)選擇器類并向其中添加背景圖像：
#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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊
下面的代碼在 Ionic 4 中對(duì)我有用。
<ion-button color="clear" class="home-link link-2" routerLink="../../tab2">
<ion-img src='path/to/image.png'></ion-img>
</ion-button>
圖像將僅顯示在按鈕內(nèi)。
如果您想顯示大圖像，您可以根據(jù)需要編輯style圖像。ion-button
您routerLink提供的需要根據(jù)您所在的當(dāng)前頁(yè)面進(jìn)行對(duì)齊，否則您可以根據(jù)路由模塊給出組件的絕對(duì)路徑。
- 3 回答
- 0 關(guān)注
- 183 瀏覽
添加回答
舉報(bào)
0/150
提交
取消