change image based on choice set

[teledactyl]

I don't know if this is the right place for a cry for help...but...
If I have a ChoiceSet with four options, can I show a different image for each choice? The idea is to give a preview of what the implications of the selection would be. So, I have two columns: the left has four choices, the right should show an image which changes as I click through the options.

Is this possible using Templating in the Designer? Otherwise, I'm using the JS renderer and could use some pointers as to how this could be done.
Thanks!

[teledactyl]

So, to answer my own question, in code I can use the onInputValueChanged event:

adaptiveCard.onInputValueChanged = (input: AdaptiveCards.Input) => {
      if(input.id) formData.$root[input.id] = input.value;
      setFormData({...formData});
    }

where formData is a React state object containing the data for my card. I've setup the template so the Input.ChoiceSet looks like this:

                      {
                          "type": "Input.ChoiceSet",
                          "choices": [
                              {
                                  "$data": "${machining}",
                                  "title": "${title}",
                                  "value": "${value}"
                              }
                          ],
                          "style": "expanded",
                          "value": "${idMachining}",
                          "id": "idMachining"
                      }

and added four separate images like this:

              {
                  "type": "Column",
                  "width": "stretch",
                  "items": [
                      {
                          "type": "Image",
                          "url": "https://.../roughing.png",
                          "horizontalAlignment": "Center",
                          "$when": "${idMachining=='Choice 1'}",
                      },
                      {
                          "type": "Image",
                          "url": "https://.../blade%20finishing.png",
                          "horizontalAlignment": "Center",
                          "$when": "${idMachining=='Choice 2'}",
                      },
                      {
                          "type": "Image",
                          "url": "https://.../hub%20finishing.png",
                          "horizontalAlignment": "Center",
                          "$when": "${idMachining=='Choice 3'}",
                      },
                      {
                          "type": "Image",
                          "url": "https://.../fillet%20finishing.png",
                          "horizontalAlignment": "Center",
                          "$when": "${idMachining=='Choice 4'}",
                      }
                  ]
              }

This nearly works nicely...I get a nasty flicker when I run down the list of choices as the card is apparently redrawn before the image is loaded. Once all the images are loaded, it's flicker free.
I guess I could parameterize the url, but I like the genericity of the onInputValueChanged function...this could be a standard pattern and avoids any business logic within the function (changing URL based on choice). I'm aiming at a no-code solution for customizers to supply a template and data only, so my rendering code needs to be general purpose.

Any comments?

Cheers