Displays an image with optional alt text.
Preview
code
1┌─────────────────┐2│ │3│ [image] │4│ │5└─────────────────┘Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeImage,3 Src: "https://example.com/image.png",4 Alt: "Description of the image",5}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "image" | Node type | required |
src | string | Image URL | required |
alt | string | Alt text for accessibility | "" |
Examples
Basic Image
go
1{2 Type: models.WidgetNodeTypeImage,3 Src: "https://example.com/chart.png",4 Alt: "Sales chart for Q4 2024",5}Generated Image
go
1{2 Type: models.WidgetNodeTypeImage,3 Src: generatedImageURL,4 Alt: "AI-generated landscape",5}Image with Caption
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeImage, Src: imageURL, Alt: "Product photo"},6 {Type: models.WidgetNodeTypeText, Value: "Figure 1: Product overview", Variant: "muted"},7 },8}Image Gallery (Row)
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeImage, Src: img1, Alt: "Option A"},6 {Type: models.WidgetNodeTypeImage, Src: img2, Alt: "Option B"},7 {Type: models.WidgetNodeTypeImage, Src: img3, Alt: "Option C"},8 },9}Styling
Images are styled with:
css
1.image {2 border-radius: 0.375rem; /* rounded-md */3 max-width: 100%;4 height: auto;5}TypeScript
typescript
1const node: WidgetNode = {2 type: "image",3 src: "https://example.com/image.png",4 alt: "Description",5}Best Practices
- Always include alt text - Essential for accessibility
- Use HTTPS URLs - Ensure images load securely
- Optimize image size - Use appropriately sized images
- Host images reliably - Use CDN or reliable hosting