Using Images

The Img component displays optimized images with automatic responsive sizing and an optional click-to-enlarge modal. Images must be local files in src/assets/.

Place images in the matching asset folder for your post type:

Then import the image using the @assets alias:

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';
import photo from '@assets/events/my-photo.jpg';

<Img src={photo} alt="Workshop participants" />

Click the image above to see the full-size modal.

Controlling Width

Set width to any CSS value — percentages, pixels, etc:

<Img src={photo} alt="Small preview" width="50%" />

Disabling Click-to-Enlarge

For decorative images or icons where the modal doesn’t make sense:

<Img src={photo} alt="Decorative" enableClickToEnlarge={false} />

Required Fields

Optional Fields