Switch two images by gender


#1

I need to set two images by gender to tag

here is my html code

<img [src]="imgpath" >

and here is my method to switch between images in ts file

export class StdntprofilePage {
imgpath:string;
.................................



 constructor(){
 togglepic()
}
 togglepic(){

    if(this.gender=="boy")
    { 
       this.imgpath="./assets/img/userboy.png";
    }
    
    else(this.gender=="girl")
    {
       this.gender="./assets/img/usergirl.png";
    }
  }



}

but each and every time im getting userboy picture.
how to slove that???

im getting these data from firebase and gender is correctly shown inside other places but here i can’t change the picture.

can anyone help me??


#2

I’m surprised this even compiled.

if () {
}
else () {
}

does not look like syntactically valid JavaScript to me. I’m also confused by the naming of the function togglepic. I would expect a function called that to switch the picture from one of two states to the other, and if I called it twice it would undo itself. I would call it something like avatarFromGender() instead.


#3

Look the else. You need store url on imgpath variable, not gender variable.


#4

ah that was a mistake n i corrected it after posting this.no luck


#5

You need to show us the latest code you are using. Basically you’ve two errors in your code, one is a syntax error and the other logical.

This has syntax error as hinted by @rapropos. It should be else if (this.gender=="girl")

This has the logical error as pointed out by @rtalexk. It should be this.imgpath = "./assets/img/usergirl.png";


#6

There is also the issue of what happens if gender is neither boy nor girl, and I suppose it could be considered poetic that this code silently gives such people no avatar at all.