コンテンツにスキップ
Lism UI

Media

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

  • デフォルトで<img>タグが出力されます。
  • <Media>には filter系プロパティ を指定しやすくなっています。
    blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia, dropShadow を統合し、css.filterに受け渡します。
  • css.objectFit,css.objectPosition をcssプロパティを介さずにそのまま受け取れます。
  • css.objectFit,css.objectPosition をcssプロパティを介さずにそのまま受け取れます。
↓

例

<Media src='/img/img-2.jpg' alt='' width='960' height='640' />
↓
filter系のプロパティ, objectPositionの指定
Lorem ipsum text. 
<Frame tag='figure' ar='16/9' pos='r'>
  <Media contrast={1.1} saturate={0.2} objectPosition='50% 70%' 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>を使う方法

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

↓
asを活用してでNext.jsのImageを渡す
import { Media } from '@lism-ui/core';
import Image from 'next/image';


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

Astro の<Image>を使う方法

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

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

↓
Astroの<Image>を使用する例
import { Media } from '@lism-ui/astro';
import Image from 'next/image';


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