Media
<Media>は、画像や動画などのメディア要素を出力するLismコンポーネントです。
デフォルトで<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="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> ↓
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>を使う方法
Astroの<Image>は、asに渡すことができません。
Astro(TypeScript?)のチェックに引っかかり、「Image missing required “alt” property.」エラーが出てしまいます。
そのため、lism-css/astroから読み込んだ<Media>では、以下のようにasに'AstroImage'という文字列を指定することで内部で<Image>が呼び出されるようにしています。
↓
Astroの
<Image>を使用する例import { Media } from 'lism-css/astro';
<Media as="AstroImage" src="/img.jpg" alt="Dummy Image" width="960" height="640" />