Angular img tag src conditional

Juan Castillo 0
Viewed 25

i have img1.png, img2.png, img3.png and img4.png, how to add one of these images in src based in a condition

<img src ="if a===1 then img1.png if a ===2 then img2.png if a === 3 then img3.png if a ===4 then img4.png>
image javascript angular html
2 Answers

The best way to to this is set the image source dynamically in your component .ts file.

Your template

<img [src]="image">

In your component

get image() { return ...add your logic to figure out what image to show}

dee strucked0

run the condition in a function, and use interpolation on the src= like:

    src={{imageVariable}}

in the ts part call
useImagae(){
if(a === 1)
this.imageVariable = "img1.png"
}
Mordagel0
Related