Renders a picture at a fixed shape with a built-in fallback when loading fails.
import { Image } from "@/fragments/ui";Source<Image
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop"
alt="Code on a screen"
width={300}
/>npx @usefragments/cli add imageWrites src/fragments/ui/components/Image plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Lock the frame so a grid stays even whatever the file is.
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
<Image
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=200&fit=crop"
alt="Square image"
aspectRatio="1:1"
width={100}Rounding softens the frame; match it to the surface it sits on.
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<Image
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop"
alt="No rounding"
rounded="none"
width={80}A dead URL shows this instead of a broken-image glyph.
<Image
src="https://invalid-url.example/image.jpg"
alt="Image that will fail"
width={200}
height={150}
rounded="md"Prop | Type | Default | Description |
|---|---|---|---|
srcRequired | string | Not set | Image source URL |
altRequired | string | Not set | Alt text for accessibility (required) |
aspectRatio | enum1:14:316:921:9auto | auto | Aspect ratio of the image container |
objectFit | enumcovercontainfillnone | cover | How the image fits within its container |
width | union | Not set | Width of the image container |
height | union | Not set | Height of the image container |
rounded | enumnonesmmdlgfull | none | Border radius |
fallback | node | Not set | Content to show while loading or on error |
className | string | Not set | Additional class name |
style | object | Not set | Inline styles |
imgProps | object | Not set | Additional props for the underlying img element (except src/alt/size/style/events) |
onImageLoad | function | Not set | Called when the underlying img element loads |
onImageError | function | Not set | Called when the underlying img element fails to load |