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?

CodePudding user response：

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.

CodePudding user response：

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