Ionic 按钮内的图像

Question

Good morning, I'm trying to put an image inside an ionic button, but I'm not having success, I've tried everything, does anyone have any correct solution for native buttons?

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

Answer 1

Make a selector class and add your background image to it:

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

OR

something like this:

 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 2

Your button is colored by default, try to add the property color="none" to your ion-button object, like this:

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

So that you can see the image underneath the default background color. Hope this helps !

Answer 3

the below code just worked for me in Ionic 4.

<ion-button color="clear" class="home-link link-2" routerLink="../../tab2">
  <ion-img src='path/to/image.png'></ion-img>
</ion-button>

The image would be displayed only within the button.

If you would like to display a large image, you could edit the style for the ion-button based on your need.

The routerLink you are providing needs to be aligned based on the current page you are in, or else you could give the absolute path of the component based on the routing module.

Hope that helps!