Images

When using Mateu you can include an image in your form by simply creating a String field and annotating it with @Image.

E.g.:

@Caption("Images")
public class MyForm {

        @Image(style = "height: 64px; width: 64px;")
        @Caption("")
        String image = "https://www.svgrepo.com/show/530409/time.svg";
        
        @Image(style = "height: 148px; width: 148px;")
        String imageWithCaption = "https://www.svgrepo.com/show/530464/insurance.svg";
        
        @Image
        @CallActionOnClick("assess")
        @Style("height: var(--lumo-icon-size-l); width: var(--lumo-icon-size-l);")
        String clickableImage = "https://www.svgrepo.com/show/430013/education-school-study-sticker-9.svg";

        @Image
        @Style("height: var(--lumo-icon-size-l); width: var(--lumo-icon-size-l);")
        String imageFromSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj"
                            + "AwMC9zdmciIH"
                            + "ZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMi"
                            + "BieSBAZm9udG"
                            + "F3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9"
                            + "mb250YXdlc2"
                            + "9tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCA"
                            + "xLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4g"
                            + "LS0"
                            + "+PHBhdGggZD0iTTgwIDEwNGEyNCAyNCAwIDEgMCAwLTQ4IDI0IDI0IDAgMSAwIDAgNDh6bTgw"
                            + "LTI0YzAgMzIuOC0xOS43IDYxLTQ4IDczLjN2ODcuOGMxOC44LTEwLjkgNDAuNy0xNy4xIDY0"
                            + "LTE3LjFoOTZjMzUuMyAwIDY0LTI4LjcgNjQtNjR2LTYuN0MzMDcuNyAxNDEgMjg4IDExMi44"
                            + "IDI4OCA4MGMwLTQ0LjIgMzUuOC04MCA4MC04MHM4MCAzNS44IDgwIDgwYzAgMzIuOC0xOS43"
                            + "IDYxLTQ4IDczLjNWMTYwYzAgNzAuNy01Ny4zIDEyOC0xMjggMTI4SDE3NmMtMzUuMyAwLTY"
                            + "0IDI4LjctNjQgNjR2Ni43YzI4LjMgMTIuMyA0OCA0MC41IDQ4IDczLjNjMCA0NC4yLTM1L"
                            + "jggODAtODAgODBzLTgwLTM1LjgtODAtODBjMC0zMi44IDE5LjctNjEgNDgtNzMuM1YzNTI"
                            + "gMTUzLjNDMTkuNyAxNDEgMCAxMTIuOCAwIDgwQzAgMzUuOCAzNS44IDAgODAgMHM4MCAzN"
                            + "S44IDgwIDgwem0yMzIgMGEyNCAyNCAwIDEgMCAtNDggMCAyNCAyNCAwIDEgMCA0OCAwek04M"
                            + "CA0NTZhMjQgMjQgMCAxIDAgMC00OCAyNCAyNCAwIDEgMCAwIDQ4eiIvPjwvc3ZnPg==";

        @ReadOnly
        String assessment

        @Action(visible = false, target=ActionTarget.Message)
        String assess() {
          return "It works!";
        };
}