Construa um componente de imagem personalizado

Astro fornece dois componentes integrados que você pode usar para exibir e otimizar suas imagens. O componente <Picture> permite que você exiba imagens responsivas e trabalhe com diferentes formatos e tamanhos. O componente <Image> otimiza suas imagens e permite que você passe diferentes propriedades de formatos e de qualidade.

Quando você precisar de opções que os componentes <Picture> e <Image> não suportam atualmente, você pode usar a função getImage() para criar um componente personalizado.

Nesta receita, você usará a função getImage() (EN) para criar seu próprio componente de imagem personalizado que exibe arquivos de imagens diferentes com base em media queries.

Receita

Crie um novo componente Astro e importe a função getImage()
```
---
 import { getImage } from "astro:assets";
---
```
Crie um novo componente para sua imagem personalizada. MyCustomComponent.astro receberá três props de Astro.props. As propriedades mobileImgUrl e desktopImgUrl são usadas para criar sua imagem em diferentes tamanhos de viewport. A propriedade alt é usada para o texto alternativo da imagem. Essas propriedades serão passadas onde quer que você renderize seus componentes de imagem personalizados. Adicione as seguintes importações e defina as propriedades que você usará no seu componente. Você também pode usar TypeScript para tipar as propriedades.
```
---
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;
---
```

Defina cada uma de suas imagens responsivas chamando a função getImage() com as propriedades desejadas.

---
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,
});
---

Crie um elemento <picture> que gera um srcset com suas diferentes imagens baseado nas media queries desejadas.

---
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>

Importe e use <MyCustomImageComponent /> em qualquer arquivo .astro. Certifique-se de passar as props necessárias para gerar duas imagens diferentes em diferentes tamanhos de viewport:

---
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="imagem de perfil do usuário"
/>

Contribua Comunidade Sponsor