Fulldev UI

Image

An optional image with responsive picture formats for existing Astro blocks.

Installation

npx shadcn@latest add @fulldev/image

Usage

---
import { Image } from "@/components/ui/image"
import photo from "@/assets/photo.webp"
---

<Image
  src={photo}
  alt="The team at work"
  formats={["avif"]}
  fallbackFormat="webp"
  widths={[480, 768, 1080, 1440]}
  sizes="(min-width: 64rem) 50vw, 100vw"
/>

Without formats, the component renders Astro’s Image. With formats, it renders Astro’s Picture, keeping the image’s classes and attributes. Choose widths and sizes for the rendered image. Leave SVGs and animated images in their original format.

The picture wrapper uses display: contents. It still changes DOM ancestry: check direct-child CSS selectors when adding formats to an existing block.

API Reference

The component accepts Astro Image props, plus formats, fallbackFormat and pictureAttributes from Astro Picture. A missing src renders nothing. Its default image classes are h-auto w-full; class is merged after them.