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&nbsp; color="none" // <-- Add this line&nbsp; class="home-link link-2"&nbsp; style="background-image:url('img/myImage.jpg'); background-size:cover"&nbsp;&nbsp; routerLink="/schedule">&nbsp; AGENDA</ion-button>这样您就可以看到默认背景颜色下方的图像。希望这可以帮助 ！

Answer 2

创建一个选择器类并向其中添加背景图像：#AddImg {&nbsp; background-image: url(' http://placekitten.com/301/301');&nbsp; height: 100px;&nbsp; width: 100px;}<ion-button class="home-link link-2" id="AddImg" style=" background-size:cover" routerLink="/schedule">AGENDA</ion-button>或者像这样的东西：ion-button {&nbsp; 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">&nbsp; <ion-img src='path/to/image.png'></ion-img></ion-button>图像将仅显示在按钮内。如果您想显示大图像，您可以根据需要编辑style图像。ion-button您routerLink提供的需要根据您所在的当前页面进行对齐，否则您可以根据路由模块给出组件的绝对路径。