사용자 정의 이미지 컴포넌트 빌드

Astro는 이미지를 표시하고 최적화하는 데 사용할 수 있는 두 가지 내장 컴포넌트를 제공합니다. <Picture> 컴포넌트를 사용하면 반응형 이미지를 표시하고 다양한 형식과 크기로 작업할 수 있습니다. <Image> 컴포넌트는 이미지를 최적화하고 다양한 형식과 품질 속성을 전달할 수 있도록 해줍니다.

<Picture> 및 <Image> 컴포넌트가 지원하지 않는 옵션이 필요한 경우 getImage() 함수를 사용하여 사용자 정의 컴포넌트를 만들 수 있습니다.

이 레시피에서는 getImage() 함수를 사용하여 미디어 쿼리에 따라 다양한 소스 이미지를 표시하는 고유한 사용자 정의 이미지 컴포넌트를 만듭니다.

레시피

새로운 Astro 컴포넌트를 생성하고 getImage() 함수를 가져옵니다.
src/components/MyCustomImageComponent.astro
```
---
 import { getImage } from "astro:assets";
---
```
사용자 정의 이미지에 대한 새 컴포넌트를 만듭니다. MyCustomComponent.astro는 Astro.props로부터 세 개의 props를 받습니다. mobileImgUrl 및 desktopImgUrl props는 다양한 뷰포트 크기에서 이미지를 만드는 데 사용됩니다. alt prop은 이미지의 대체 텍스트에 사용됩니다. 이러한 props는 사용자 정의 이미지 컴포넌트를 렌더링할 때마다 전달됩니다. 다음 import를 추가하고 컴포넌트에서 사용할 props을 정의합니다. TypeScript를 사용하여 props의 타입을 정의할 수도 있습니다.
src/components/MyCustomImageComponent.astro
```
---
import type { ImageMetadata } from "astro";
import { getImage } from "astro:assets";

interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
}

const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
---
```

원하는 속성으로 getImage() 함수를 호출하여 각 반응형 이미지를 정의합니다.

---
import type { ImageMetadata } from "astro";
import { getImage } from "astro:assets";

interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
}

const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;

const mobileImg = await getImage({
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
});

const desktopImg = await getImage({
    src: desktopImgUrl,
    format: "webp",
    width: 800,
    height: 200,
});
---

미디어 쿼리에 따라 다른 이미지의 srcset을 생성하는 <picture> 요소를 만듭니다.

---
import type { ImageMetadata } from "astro";
import { getImage } from "astro:assets";

interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
}

const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;

const mobileImg = await getImage({
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
});

const desktopImg = await getImage({
    src: desktopImgUrl,
    format: "webp",
    width: 800,
    height: 200,
});
---

<picture>
    <source media="(max-width: 799px)" srcset={mobileImg.src} />
    <source media="(min-width: 800px)" srcset={desktopImg.src} />
    <img src={desktopImg.src} alt={alt} />
</picture>

.astro 파일에서 <MyCustomImageComponent />를 가져와 사용하세요. 서로 다른 뷰포트 크기에서 두 개의 서로 다른 이미지를 생성하는 데 필요한 props를 전달해야 합니다.

---
import MyCustomImageComponent from "../components/MyCustomImageComponent.astro";
import mobileImage from "../images/mobile-profile-image.jpg";
import desktopImage from "../images/desktop-profile-image.jpg";
---

<MyCustomImageComponent
    mobileImgUrl={mobileImage}
    desktopImgUrl={desktopImage}
    alt="user profile picture"
/>

GitHub Issue 생성

의견 보내기

사용자 정의 이미지 컴포넌트 빌드

레시피