Изображение внутри кнопки Ioni c - PullRequest
Новая
       3

Изображение внутри кнопки Ioni c

0 голосов
/ 07 апреля 2020

Доброе утро, я пытаюсь поместить изображение внутри кнопки c, но у меня ничего не получается, я все перепробовал, у кого-нибудь есть правильное решение для родных кнопок? 

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

Ответы [ 3 ]

0 голосов
/ 07 апреля 2020

Ваша кнопка по умолчанию окрашена, попробуйте добавить свойство 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>

, чтобы вы могли видеть изображение под фоновым цветом по умолчанию. Надеюсь, это поможет!

0 голосов
/ 07 апреля 2020

приведенный ниже код работал только для меня в Ioni c 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 должны быть выровнены на основе текущей страницы, на которой вы находитесь, иначе вы могли бы дать абсолютный путь компонента на основе модуля маршрутизации.

Надеюсь, это поможет!

0 голосов
/ 07 апреля 2020

Создайте класс селектора и добавьте к нему фоновое изображение: 

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