kai-image
Alt text is required, so a picture never goes out unnamed to a screen reader.
- Shadow DOM
- https / data: / blob:
- Alt text required
- Kit chrome
Preview
Section titled “Preview”Set src to the image address and alt to a real description. Every form of image URL works: https, a data: URI, and a blob: object URL the app created itself.
<kai-image src="https://example.com/photo.jpg" alt="A mountain landscape at dusk"></kai-image>
<!-- an inline SVG, no request at all --><kai-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="A purple star icon"></kai-image>alt is required rather than optional: an image with no name is invisible to a screen reader, and a placeholder string (“image”) is worse than none.
The element filters no schemes, because an <img> cannot execute one. Where a URL is navigable the kit applies its own policy; that is a different guard for a different sink.
Examples
Section titled “Examples”A hosted image
Section titled “A hosted image”A second source
Section titled “A second source”An inline data URI
Section titled “An inline data URI”No request, no CDN: the bytes ride in the URL.
| Property | Type | Default | Notes |
|---|---|---|---|
| theme | "light" | "dark" | "auto" | 'auto' | Color mode (`auto` follows prefers-color-scheme). |
| src | string | — | The image URL: an `https:`/`http:` location, a `data:` URI, or a `blob:` object URL you created. |
| alt | string | '' | Alt text. Attribute `alt`. Always give meaningful text: an empty alt marks the image as decorative. |
| class | string | — | Extra classes for the `<img>`. |
Composed from
Section titled “Composed from”This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.
Image