Is there a way to define variables for paths inside the HTML code in a typesricpt file?

Question

To design the frontend we use the vaadin designer. In the .ts files of our project we have some images where we want to define variables for the path.

at the moment it is like that: <img src="../../themes/light/img/example.jpg" style="flex-shrink: 0; flex-grow: 0; width: 100%; height: 100%;">

but we want to define a variable for the light folder, so that the path change based on the variable.

Like this: <img src="../../themes/myVariable/img/example.jpg" style="flex-shrink: 0; flex-grow: 0; width: 100%; height: 100%;"> where myVariable is String myVariable = "light"; for example.

Is there any way to do something like that?

Answer 1

Designer templates are 100% static. If you want to do something dynamic, then you can use @Id to get hold of the corresponding Java instance and make customizations in that way.

Answer 2

Use an object to store key value pair with key being any variable you want and value being the img you want to show. For Example :

import LandFood from "./landfood.jpg";
import SeaFood from "./seafood.png";

const food_obj = {
 land : LandFood ,
 sea  : SeaFood
}

const ShowFood = () => {
 const type = 'land';
 return <div>
       <img src={food_obj[type]} />
 </div>
}