Media
<Media>は、画像や動画などのメディア要素を出力するLismコンポーネントです。
Astro版ではデフォルトで Astro の<Image>が使用されます。React版ではデフォルトで<img>タグが出力されます。
Import
import { Media } from 'lism-css/react'; ↓
例
<Media src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" alt="Dummy Image" /> ↓
filterを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> ↓
objectPositionを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>Next.js の<Image>を使う方法
Next.jsのImageなどは、asプロパティに渡すことができます。
↓
asを活用してNext.jsのImageを渡すimport { Media } from 'lism-css/react';import Image from 'next/image';
<Media as={Image} src="/img.jpg" alt="Dummy Image" width="960" height="640" />Astro版での<Image> / <Picture>の使い方
lism-css/astroの<Media>では、asの値に応じて Astro のコンポーネントに自動マッピングされます。
as | 出力 |
|---|---|
省略 / "img" | Astro <Image /> |
"picture" | Astro <Picture /> |
"video" / "iframe" 等 | そのままHTMLタグ |
<Media>は内部で Astro の<Image />や<Picture />を使用しているため、それらのすべての Props が使用できます。
詳細なリファレンスは Astro 公式ドキュメントをご覧ください：
<Image /> / <Picture />
↓
qualityとformatを使用する例（Astro <Image>）
import myImage from '@/img/img-1.jpg';
<Media src={myImage} inferSize alt="Dummy Image" quality="high" format="webp" />リモート画像で使用する例
↓
リモート画像で使用する例
<Media src="https://cdn.lism-css.com/img/a-1.jpg" inferSize alt="Dummy Image" quality="high" format="webp" /> ↓
Astro
<Picture>でformatsを使用する例
<Media as="picture" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" alt="Dummy Image" formats={['avif', 'webp']} />外部サイトの画像をAstroの<Image>や<Picture>で利用してinferSizeなどのプロパティを使用する場合、astro.config.tsでimage.domains（またはimage.remotePatterns）を設定する必要があります。