Atlas Forms
Image Control
The image type renders an inline image within the form canvas. Use it for logos, diagrams, instructional screenshots, and branding elements. Images are always display-only — they do not accept user input or write to the data model.
Minimal Example
{
"id": "company-logo",
"type": "image",
"order": 1,
"width": "full",
"settings": {
"src": "https://cdn.example.com/logo.png",
"alt": "ACME Corporation Logo"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
src | string (URL or base64) | — | Image source URL or data URI |
alt | string | "" | Alt text for accessibility (required for content images) |
width | string (CSS) | "100%" | Image width. Can be px, %, or auto. |
maxWidth | string (CSS) | — | Maximum width constraint (e.g., "400px") |
height | string (CSS) | "auto" | Image height. Usually leave as auto to preserve aspect ratio. |
align | left | center | right | left | Horizontal alignment of the image within its column |
borderRadius | string (CSS) | "0" | Corner rounding (e.g., "8px", "50%" for circle) |
caption | string | — | Optional caption text displayed below the image |
link | string (URL) | — | If set, the image is wrapped in an anchor tag |
linkTarget | _blank | _self | _blank | How to open the link |
Logo Example
{
"id": "header-logo",
"type": "image",
"order": 1,
"width": "half",
"settings": {
"src": "https://cdn.acme.com/brand/logo-dark.svg",
"alt": "ACME Corp",
"maxWidth": "200px",
"align": "left",
"link": "https://acme.com",
"linkTarget": "_blank"
}
}Instructional Diagram
{
"id": "process-diagram",
"type": "image",
"order": 5,
"width": "full",
"settings": {
"src": "https://docs.acme.com/images/approval-process.png",
"alt": "Diagram showing the 4-step approval process: Submit → Review → Approve → Notify",
"maxWidth": "700px",
"align": "center",
"caption": "Figure 1: Approval process flow",
"borderRadius": "8px"
},
"modeVisibilitySettings": {
"edit": true,
"view": false,
"preview": true,
"admin": true,
"design": true
}
}Responsive Sizing
Use percentage widths for responsive images that scale with the form container:
{
"id": "banner",
"type": "image",
"settings": {
"src": "https://cdn.example.com/banner.jpg",
"alt": "Registration banner",
"width": "100%",
"height": "auto"
}
}Base64 Data URI
For small logos or icons that should be embedded directly in the form schema (no external dependency):
{
"id": "watermark",
"type": "image",
"settings": {
"src": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPi4uLjwvc3ZnPg==",
"alt": "Document watermark",
"maxWidth": "80px",
"align": "right"
}
}
Content Security Policy
If your Atlas Forms deployment uses a strict Content Security Policy, external image URLs must be explicitly allowed in the
img-src directive. Base64 data URIs are always allowed without CSP configuration.
Dynamic Image Source
The src setting supports template expressions to show different images based on form values:
{
"id": "product-image",
"type": "image",
"settings": {
"src": "https://cdn.example.com/products/{{values.product-id}}.jpg",
"alt": "Product image",
"maxWidth": "300px",
"align": "center"
},
"visibilityRule": "values['product-id'] != null"
}