Set image source conditionally based on variable

Wappler General How To
#1

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

Example.

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.

#2

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
#3

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?

#4

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

#5

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!