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
| Property | Description |
|---|---|
srcstring (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. |
altstring default: empty | Alternative text for screen readers and broken-image fallback. |
fullBleedboolean 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
Related articles
- Image field
Upload an image to a SharePoint Image column with preview, crop, and replace.