How to Use Image as Button in Ionic

How to use image as button in ionic

try this.

 <img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" >

this shoud to the trick you can have the height and width as your wish.

Make sure you give the correct path to src field.

Ionic change image on click?

The problem is here <img [src]="cards.img" />. You are trying to read .img of an array, instead of a single card.

Have a selectedCardIndex variable on your class and on button click, you need to set the selectedCardIndex value.

You can change your code to below to make it work:

<div class="card">
  <img [src]="cards[selectedCardIndex].img" />
</div>
<ion-button (click)="logEvent($event)">
  <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
</ion-button>

export class HomePage implements OnInit {
  cards;
  selectedCardIndex = 0;

  constructor() {
    this.cards = [
      {
        img: "https://placeimg.com/300/300/people",
      },
      {
        img: "https://placeimg.com/300/300/animals",
      },
    ];
  }

  ngOnInit() {}

  logEvent(event) {
    const newIndex = this.selectedCardIndex + 1;
    
    if (newIndex === this.cards.length) {
      this.selectedCardIndex = 0;
    } else {
      this.selectedCardIndex = newIndex;
    }
  }
}

Ionic how to add button beside an image

Use position: absolute on the icon.

An absolutely positioned element is an element whose computed position value is absolute or fixed.

div {

  position: relative;

  width: fit-content;

}

div > .icon {

  position: absolute;

  right: 12px;

  bottom: 20px;

  width: 50px;

}

<div>

  <img src="https://www.esparkinfo.com/wp-content/uploads/2016/08/default-avatar.png" alt="Sample Image">

  <img class="icon" src="https://findicons.com/files/icons/985/affel/128/add.png" alt="Sample Image">

</div>

How to align Ionic elements button or image with text in one line

with ion-header you can use ion-item

<ion-header class="header">
    <ion-toolbar>
        <ion-item class="ion-no-padding" lines="none">
            <ion-avatar slot="start">
                <ion-img src="assets/img.png"></ion-img>
            </ion-avatar>
            <ion-label>TEXT</ion-label>
            <ion-buttons slot="end">
                <ion-button color="primary" fill="clear">
                    Enter
                    <ion-icon slot="end" name="log-in"></ion-icon>
                </ion-button>
            </ion-buttons>
        </ion-item>
    </ion-toolbar>
</ion-header>

it gives this result

show / hide pictures on pressed button in ionic

IONIC uses Angular. So you can also use *ngIf to show/hide the image(s) on tap. You put the *ngIf on the image(s).

How can I design the Ionic button with symbols on the right side?

There is default button widget in ionic.

Try below code

<button ion-button icon-end>
Right Icon
<ion-icon name="star"></ion-icon>
</button>

You can find more Here

---

Related Topics