Media

メディア用に少し特殊な処理が加えられている<Lism>コンポーネントです。

• デフォルトで<img>タグが出力されます。
• <Media>には filter系プロパティ を指定しやすくなっています。
  blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia, dropShadow を統合し、style.filterへ受け渡します。
• objectPositionをstyleプロパティを介さずにそのま指定できます。
• objectFitをstyleプロパティを介さずにそのま指定できます。
  さらに、cover,contain の場合はユーティリティクラス(-obf:cv,-obf:cn)で出力します。

↓

例

JSX

<Media src='/img/img-2.jpg' alt='' width='960' height='640' />

↓

filter系のプロパティ, objectPosition の指定

JSX

<Frame tag='figure' ar='16/9' pos='r'>
  <Media contrast={1.1} saturate={0.2} objectPosition='50% 100%' src='/img/img-2.jpg' alt='' width='960' height='640' />
  <Text tag='figcaption' pos='a' z='1' b='0' p='5' w='100%' c='white' ta='c' lts='l'>Lorem ipsum text.</Text>
</Frame>

Next.jsのImageなどは、asプロパティに渡すことができます。

import { Media } from 'lism-css/react';
import Image from 'next/image';

<Media as={Image} src="/img.jpg" alt="" width='960' height='640' />

Astroの<Image>は、asに渡すことができません。
Astro(TypeScript?)のチェックに引っかかり、「Image missing required “alt” property.」エラーが出てしまいます。

そのため、lism-css/astroから読み込んだ<Media>では、以下のようにasに'AstroImage'という文字列を指定することで内部で<Image>が呼び出されるようにしています。

import { Media } from 'lism-css/astro';
import Image from 'next/image';

<Media as='AstroImage' src="/img.jpg" alt="" width='960' height='640' />