Set image source conditionally based on variable

Is there a way to set an image src conditionally based on a variable?


I’m using a variable on the page toggling a menu. The menu has an icon " > " when closed
and when the menu is open I want to display a different icon " < "

I was hoping to set that based on the same variable I’m using to display the menu.

Pseudo code
variable == 0 img source 1
variable == 1 img source 2

But the dynamic attribute for image src doesn’t take conditions from what I can tell. Not sure if there’s a way to do this easily? Hoping to avoid using two img elements and toggling their visibility with a condition.

Been searching the forum, but couldn’t find much talk about it, so I might just be missing something very obvious.

You can use a ternary expression in the src dynamic attribute

For example:

variable == 0 ? 'img source 1' : variable == 1 ? 'img source 2' : null

Or if there are really just 2 options:

variable == 0 ? 'img source 1' :  'img source 2' 
1 Like

Oh brilliant! thank you, I didn’t realise it takes expressions. It said “data binding” on the tooltip. Does that mean you can pop expressions into most value fields in wappler?

Yes, you can. You can type them in, or you can use the magic wand formatters to build with the UI.

Right, of course! I have access to all that in there as well! I got too blinded by thinking I could only do a data binding in the value field, as in pulling a path from a server connect. Love it!