104Get started
HextaUI

Attachment: Broken image

When an image preview fails to load, it falls back to a file icon.

missing.pngPreview unavailable
import {
  Attachment,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

export function AttachmentBrokenImage() {
  return (
    <Attachment>
      <AttachmentMedia variant="image">
        <img src="/preview/missing.png" alt="" />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>missing.png</AttachmentTitle>
        <AttachmentDescription>Preview unavailable</AttachmentDescription>
      </AttachmentContent>
    </Attachment>
  )
}

Add this example

This adds the example as components/examples/attachment/broken-image.tsx, together with the Attachment component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/attachment-broken-image.json

To add only the component, follow the Attachment installation.

Props in this example

The Attachment props this example sets, from the API reference.

AttachmentMedia

PropTypeDefault
variantimage wraps its child in a square AspectRatio with a file icon fallback.
"icon" | "image""icon"

Every prop is in the Attachment API reference.

More Attachment examples

See them all, with keyboard support and accessibility notes, on the Attachment page.

Related components