Media
<Media> is a Lism component for outputting media elements such as images and videos.
In the Astro version, Astro’s <Image> is used by default. In the React version, it outputs an <img> tag by default.
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>
Next.js Image and similar components can be passed via the as property.
↓
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>
In <Media> imported from lism-css/astro, the component is automatically mapped based on the as value.
as | Output |
|---|---|
omitted / "img" | Astro <Image /> |
"picture" | Astro <Picture /> |
"video" / "iframe" etc. | HTML tag as-is |
Since <Media> uses Astro’s <Image /> or <Picture /> internally, all their props are accepted.
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.