Ionic 按钮内的图像

Question

早上好，我正在尝试将图像放入离子按钮中，但我没有成功，我已经尝试了所有方法，有人对本机按钮有任何正确的解决方案吗？<ion-button  class="home-link link-2"  style="background-image:url('img/myImage.jpg'); background-size:cover"   routerLink="/schedule">  AGENDA</ion-button>

Answer 1

您的按钮默认是彩色的，尝试将该属性添加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>

这样您就可以看到默认背景颜色下方的图像。希望这可以帮助 ！

Answer 2

创建一个选择器类并向其中添加背景图像：

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

Answer 3

下面的代码在 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提供的需要根据您所在的当前页面进行对齐，否则您可以根据路由模块给出组件的绝对路径。