Skip to content

Demo

The following examples showcase the Starlight Image Zoom plugin in action.

Markdown

src/content/docs/example.md
---
title: My page title
---
![Ceramic mug on table](../../assets/mug.jpg)
Preview

<Image />

src/content/docs/example.mdx
---
title: My page title
---
import { Image } from 'astro:assets'
import paper from '../../assets/paper.jpg'
<Image src={paper} alt="Brown pencil on white printing paper" />
Preview

<Picture />

src/content/docs/example.mdx
---
title: My page title
---
import { Picture } from 'astro:assets'
import blackboard from '../../assets/blackboard.jpg'
<Picture src={blackboard} formats={['avif', 'webp']} alt="A blackboard with a bunch of diagrams on it" />