Media
<Media> is a Lism component for outputting media elements such as images and videos.
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="rel"> <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="abs" z="1" b="0" p="5" w="100%" c="white" ta="center" lts="l"> Lorem ipsum text. </Lism></Frame> ↓
Specifying objectPosition with style
リサイズ可能
<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>
Astro’s <Image> cannot be passed directly via as.
An Astro (TypeScript?) check throws an “Image missing required ‘alt’ property.” error.
Therefore, in <Media> imported from lism-css/astro, passing the string 'AstroImage' to as will internally invoke <Image>.
↓
Example of using Astro’s
<Image>import { Media } from 'lism-css/astro';
<Media as="AstroImage" src="/img.jpg" alt="Dummy Image" width="960" height="640" />