Change single image src using (tap)

Ionic Framework ionic-v3
1

I’m using a “for” loop to create a list of click-able images for my app. When the user tap the image the “src” of the image change, using Ionics (tap) function. The problem I am having is that all the images change instead of just the image that was clicked.

soundboard.html

 <ion-card-content>
  <img [src]="imageUrl" (tap)="tapEvent($event)" />
 </ion-card-content>

soundboard.ts

 imageUrl = 'http://swiftylabs.com/Sounds-App/button-Unclicked.png';

 tapEvent(e) {
  this.imageUrl = 'http://swiftylabs.com/Sounds-App/button-Clicked.png';  
  setTimeout(() => this.imageUrl = 'http://swiftylabs.com/Sounds-App/button-Unclicked.png', 1000);
 }
2 Likes
2

Hello there
what if i don’t want to make a timeout ?

i mean what if i needed to change the value of imagurl everytime i click
i mean on toggle
if it is true show some url
if it is false show another

like on , off images