Placeholder Image

Image Placeholder

The Image Placeholder placeholder-image is a layout field, it shows any image, it doesn’t return any value.

Example


{
  "component": "placeholder-image",
  "label": "Field 1",
  "name": "my_placeholder",
  "url": "https://unpkg.com/lets-form-icons@1.0.1/generic.svg",
  "react-rsuite5": {
    "maxWidth": 30,
    "maxHeight": 40
  }
}

Transformer JS

The values of a placeholder-image can be changed dynamically with a JavaScript Transformer, for example:


// ...
fields: [
  {
    component: 'checkbox',
    name: 'showPassword',
    script: `
    if (showPassword) {
      setValue('eye', 'url', 'https://unpkg.com/lets-form-icons@1.0.1/eye.svg');
    } else {
      setValue('eye', 'url', 'https://unpkg.com/lets-form-icons@1.0.1/eye-off.svg');
    }`
  },
  {
    component: 'placeholder-image',
    name: 'eye',
    url: 'https://unpkg.com/lets-form-icons@1.0.1/eye.svg'
  }
]

Reference

Property	Type	Description
component	string	= "placeholder-image"
name	string
url	string	URL of the image to show
align	string	Image alignment. Values: "left", "center", "right".
hidden	boolean	Hides the field from the form
className	string	CSS class name to assign to the field container
Pick up a framework to show specific properties Select framework