Construir un componente de imagen personalizado

Astro proporciona dos componentes integrados que puedes usar para mostrar y optimizar tus imágenes. El componente <Picture> te permite mostrar imágenes responsive y trabajar con diferentes formatos y tamaños. El componente <Image> optimizará tus imágenes y te permitirá pasar diferentes formatos y propiedades de calidad.

Cuando necesitas opciones que los componentes <Picture> y <Image> no soportan actualmente, puedes usar la función getImage() para crear un componente personalizado.

En esta receta, usarás la función getImage() para crear tu propio componente de imagen personalizado que muestre diferentes imágenes de origen basadas en media queries.

Receta

1. Crea un nuevo componente de Astro e importa la función getImage()

   src/components/MyCustomImageComponent.astro

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

2. Crea un nuevo componente para tu imagen personalizada. MyCustomComponent.astro recibirá tres props de Astro.props. Las props mobileImgUrl y desktopImgUrl se usan para crear tu imagen en diferentes tamaños de viewport. La prop alt se usa para el texto alternativo de la imagen. Estas props se pasarán donde sea que renderices tus componentes de imagen personalizados. Añade los siguientes imports y define las props que usarás en tu componente. También puedes usar TypeScript para tipar las 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;
   ---

3. Define cada una de tus imágenes responsive llamando a la función getImage() con las propiedades deseadas.

   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;
   
   const mobileImg = await getImage({
       src: mobileImgUrl,
       format: "webp",
       width: 200,
       height: 200,
   });
   
   const desktopImg = await getImage({
       src: desktopImgUrl,
       format: "webp",
       width: 800,
       height: 200,
   });
   ---

4. Crea un elemento <picture> que genere un srcset con tus diferentes imágenes basado en las media queries deseadas.

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

5. Importa y usa <MyCustomImageComponent /> en cualquier archivo .astro. Asegúrate de pasar las props necesarias para generar dos imágenes diferentes en los diferentes tamaños de viewport:

   src/pages/index.astro

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