Image (static)

Embed a static image into the form, a logo, a diagram, a screenshot. Distinct from the editable Image field.

A static image embedded in the form. Use for logos, diagrams, screenshots, or any picture that is part of the form itself rather than a property of the saved item.

For images the user uploads as part of the form's value, use

Image field instead.

Properties

PropertyDescription
src
string (URL)
default: empty
Image source URL. Set it directly, or upload a file in the designer to stash it under /SiteAssets/Forms365/<list>/images and bind the resulting URL.
alt
string
default: empty
Alternative text for screen readers and broken-image fallback.
fullBleed
boolean
default: false
Edge-to-edge layout, cancels the form root’s outer padding so the image reaches the form panel edges. Only meaningful for a top-level full-width Display block.

JavaScript recipes

The static Image is not addressable through a field/control handle. To script it, give it a custom CSS class in the Style tab and reach the <img> via the DOM.

Swap the image based on a field value

// Image element styled with class "status-img"
f365.events.onChange((e) => {
  if (e.fieldKey !== 'Status') return;
  const img = document.querySelector<HTMLImageElement>('.status-img img');
  if (img) img.src = e.newValue === 'Approved' ? '/SiteAssets/ok.png' : '/SiteAssets/pending.png';
});

Show a different logo per display mode

f365.events.onLoad(() => {
  const img = document.querySelector<HTMLImageElement>('.form-logo img');
  if (img && f365.context.displayMode === 'display') {
    img.src = `${f365.context.webUrl}/SiteAssets/logo-readonly.png`;
  }
});

Hide the image until data loads

f365.events.onLoad(() => {
  const wrap = document.querySelector<HTMLElement>('.diagram');
  if (wrap) wrap.style.display = f365.field('ShowDiagram').value ? '' : 'none';
});

Related articles

  • Image field

    Upload an image to a SharePoint Image column with preview, crop, and replace.