Construir un componente de imagen personalizado

Astro proporciona dos componentes integrados que puedes utilizar para mostrar y optimizar tus imágenes. El componente <Picture> te permite mostrar imágenes responsivas 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 admiten actualmente, puedes utilizar 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 muestra diferentes imágenes de origen según los 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 utilizan para crear tu imagen en diferentes tamaños de pantalla. La prop alt se utiliza para el texto alternativo de la imagen. Estas props se pasarán siempre que renderices tus componentes de imagen personalizados. Añade las siguientes importaciones y define las props que utilizarás en tu componente. También puedes utilizar 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 responsivas 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 conjunto srcset con tus diferentes imágenes basado en los 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 utiliza <MyCustomImageComponent /> en cualquier archivo .astro. Asegúrate de pasar las props necesarias para generar dos imágenes diferentes en los diferentes tamaños de pantalla:

   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="foto de perfil del usuario"
   />