Ionic 按钮内的图像答案

【问题标题】：Image inside the Ionic buttonIonic 按钮内的图像
【发布时间】：2020-07-19 18:39:35
【问题描述】：

早上好，我正在尝试将图像放入离子按钮中，但我没有成功，我已经尝试了所有方法，有人对本机按钮有任何正确的解决方案吗？

<ion-button
  class="home-link link-2"
  style="background-image:url('img/myImage.jpg'); background-size:cover" 
  routerLink="/schedule"
>
  AGENDA
</ion-button>

【问题讨论】：

标签： html css ionic-framework ionic-native

【解决方案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>

这样您就可以在默认背景颜色下看到图像。希望这会有所帮助！

【讨论】：

【解决方案2】：

创建一个选择器类并将您的背景图片添加到其中：

#AddImg {
  background-image: url(' http://placekitten.com/301/301');
  height: 100px;
  width: 100px;
}

&lt;ion-button class="home-link link-2" id="AddImg" style=" background-size:cover" routerLink="/schedule"&gt;AGENDA&lt;/ion-button&gt;

或

类似这样的：

ion-button {
  background-image: url(' http://placekitten.com/301/301');
}

&lt;ion-button class="home-link link-2" id="AddImg" style=" background-size:cover" routerLink="/schedule"&gt;AGENDA&lt;/ion-button&gt;

【讨论】：

【解决方案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需要根据您所在的当前页面对齐，否则您可以根据路由模块给出组件的绝对路径。

希望有帮助！

【讨论】：