Image

The Image component is used to display images and can be used with fields of type binary.

<field name="logo" widget="image" />

If you only want to show the image withou controls you can use the widget props showControls to false:

v2.33.0

<field name="logo" widget="image" widget_props="{'showControls': false}" />

Show an icon

You can show an icon instead of the image if the using the name of the icon as the value of the name. See the Icon component for more information.

<group>
  <image name="email" />
</group>

Note

The <image> tag must be inside a <group> tag.

Dynamic icons

v2.33.0

You can also use a dynamic icon if the value instead to be a base64 string is the name of the icon. This is useful when you want to show an icon based on the value.

<field name="status" widget="image" />

In this case the value of the field status is warning and the icon will be

API

Property	Description	Type	Default	Version
name	Name of the field to get the value for the image (binary or icon) or name of the icon	string	-	-
width	Width of the image in pixels	number	-	v2.107.0
height	Height of the image in pixels	number	-	v2.107.0
widget_props	Extra properties for the widget	object	-	-

Widget props

Property	Description	Type	Default	Version
showControls	Show the controls of the image	boolean	true	v2.33.0