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

Example image placeholder

Test buttons

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
React
maxWidth	number	Max width in pixel of the image
maxHeight	number	Max height in pixel of the image
marginTop	number	Margin in pixel from the top
marginBottom	number	Margin in pixel from the bottom