Media
<Media> is a Lism component for outputting media elements such as images and videos.
In the Astro version, it uses Astro’s <Image> component by default. In the React version, it renders a plain <img> tag.
Import
import { Media } from 'lism-css/react'; ↓
Example
<Media src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" alt="Dummy Image" /> ↓
Specifying filter with style
<Frame as="figure" ar="2/1" pos="relative"> <Media style={{ filter: 'contrast(1.1) saturate(0.2)' }} src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" alt="Dummy Image" /> <Lism as="figcaption" pos="absolute" z="1" b="0" p="5" w="100%" c="white" ta="center" lts="l"> Lorem ipsum text. </Lism></Frame> ↓
Specifying objectPosition with style
Resize
<Frame as="figure" ar="16/9"> <Media src="https://cdn.lism-css.com/img/a-1.jpg" style={{ objectPosition: '50% 0%' }} alt="" width="960" height="640" /></Frame>Using Next.js <Image>
You can pass Next.js Image or similar third-party components via the as prop.
↓
Passing Next.js
Image via asimport { Media } from 'lism-css/react';import Image from 'next/image';
<Media as={Image} src="/img.jpg" alt="Dummy Image" width="960" height="640" />Using Astro <Image> / <Picture>
When using <Media> from lism-css/astro, the underlying component is resolved automatically based on the as value.
as | Output |
|---|---|
omitted / "img" | Astro <Image /> |
"picture" | Astro <Picture /> |
"video" / "iframe" etc. | HTML tag as-is |
Because <Media> wraps Astro’s <Image /> or <Picture /> internally, it accepts all of their props.
See the official Astro docs for the full reference:
<Image /> / <Picture />
↓
Using
quality and format (Astro <Image>)
import myImage from '@/img/img-1.jpg';
<Media src={myImage} inferSize alt="Dummy Image" quality="high" format="webp" />Remote image example
↓
Remote image example
<Media src="https://cdn.lism-css.com/img/a-1.jpg" inferSize alt="Dummy Image" quality="high" format="webp" /> ↓
Using Astro
<Picture> with formats
<Media as="picture" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" alt="Dummy Image" formats={['avif', 'webp']} />When using external images with Astro’s <Image> or <Picture> and properties like inferSize, you need to configure image.domains (or image.remotePatterns) in astro.config.ts.