Image

Static image in the form, such as a logo or diagram.

Widget description: `image`

The widget displays an image from a URL, such as a logo, diagram, or photo from an item field. You can build the URL from field values (https://domain/photos/[Id].jpg) so each item shows its own image. It is a virtual widget and is not saved to the item. It has nothing to do with the SharePoint Image field type, which uploads an image.

Image widget settings: URL or template and alignment

Adding to the form

On the Widgets tab, select Image and drag it into a section (or click “+”). A new widget has the URL https:// and screen-reader text “Image”, so replace it first.

Inspector settings

Option	Property	Description	Default
Image URL or template	`imageConfig.urlTemplate`	Image address, optionally with placeholders `[Field]`, `{Field}`, `@Me`, `@Today`.	empty
Image alignment	`imageConfig.alignment`	`left` (Left), `center` (Center), `right` (Right).	`center`
Custom label	`customLabel`	Fallback text when `altText` is not set, and name used in error messages.	“Image”
Width in section, Visible	`colSpan`, `defaultVisible`	Common options shared by all widgets.	12, yes

Additional schema properties are not exposed in the inspector; configure them in the raw JSON editor:

Property	Description	Default
`imageConfig.altText`	Alternative text for screen readers. Also displayed as a caption below the image. Placeholders are not evaluated in it.	empty
`imageConfig.maxWidth`	Maximum width: a number (pixels) or a string such as `"50%"`.	100% width
`imageConfig.maxHeight`	Maximum height: a number (pixels) or a string.	unlimited
`imageConfig.openInNewTabOnClick`	Clicking opens the image at full size in a new tab.	`false`

Runtime behavior

The URL is evaluated whenever any field referenced in it changes. For example, the image updates when the user edits the [PhotoUrl] field.
The widget behaves identically in all modes (New, Edit, Display).
When the template is empty or a referenced field has no value yet, a dashed frame is shown with the hint “name: No URL is specified or a field in the expression has no value yet”.
A URL with a disallowed protocol is not loaded and the widget displays an error. Allowed protocols are http, https, and relative paths (starting with /, ./, or ../).
If the image fails to load, the widget shows an error with the URL. Once the field is fixed, it attempts to load again.

Text translations

You can translate customLabel and imageAltText (overrides altText). See Translations and Multilingual Forms.

Rules and scripts

setVisible: shows or hides the image.
The image reacts to fields in its template. To switch it based on status, use a rule with setValue or setExpression to set a helper field containing the URL and reference that field in the template.

Configuration example (JSON)

{
  "internalName": "widget_image_foto",
  "customLabel": "Employee photo",
  "fieldType": "image",
  "colSpan": 4,
  "defaultVisible": true,
  "imageConfig": {
    "urlTemplate": "https://intranet.company.com/photos/[Id].jpg",
    "altText": "Employee photo",
    "maxHeight": 160,
    "alignment": "left",
    "openInNewTabOnClick": true
  }
}

Form with an image loaded from an item field (top) and an error frame for an invalid URL (bottom)

Limitations and tips

The widget allows data: URLs (base64 embedded images) and relative paths, as well as http and https. Other schemes (such as javascript:) are blocked and show an error message. However, large embedded images increase configuration and item size, so prefer a URL to a file in a library.
A SharePoint image is only visible to users who have permission to access the file. Anonymous URLs work for everyone.
Set maxHeight or maxWidth so a large image does not break the layout.
Placeholders insert field text into the URL as-is. Handle spaces and special characters in the source field itself.