Angular img tag src conditional-CodePudding

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>

CodePudding user response：

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}

CodePudding user response：

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"
}