Componente ThemedImage

Características

• ✅ Soporta imágenes tanto para modo claro como oscuro
• ✅ Usa el componente Image optimizado de Astro para rendimiento
• ✅ Soporta la ruta alias ~/images
• ✅ Optimización y procesamiento automático de imágenes
• ✅ Soporte TypeScript con tipado estricto
• ✅ Sigue las convenciones de temas de Starlight (light:sl-hidden y dark:sl-block)

Demo en Vivo

Prueba cambiar entre modo claro y oscuro para ver el componente en acción:

Uso

Uso Básico

---
import ThemedImage from '~/components/ThemedImage';
---

<ThemedImage
  alt="Flujo de Staking"
  sources={{
    light: '~/images/staking-light.svg',
    dark: '~/images/staking-dark.svg',
  }}
/>

Con Dimensiones Personalizadas

<ThemedImage
  alt="Flujo del Estándar de Token Aptos"
  sources={{
    light: '~/images/aptos-token-standard-flow.svg',
    dark: '~/images/aptos-token-standard-flow-dark.svg',
  }}
  width={600}
  height={400}
/>

Con Clase CSS Personalizada

<ThemedImage
  alt="Activo Digital"
  sources={{
    light: '~/images/digital-asset-light.svg',
    dark: '~/images/digital-asset-dark.svg',
  }}
  class="rounded-lg shadow-md"
/>

Usando Imágenes Importadas

---
import lightImage from '~/images/my-light-image.png';
import darkImage from '~/images/my-dark-image.png';
import ThemedImage from '~/components/ThemedImage';
---

<ThemedImage
  alt="Mi Imagen"
  sources={{
    light: lightImage,
    dark: darkImage,
  }}
/>

Props

Prop	Tipo	Requerido	Por Defecto	Descripción
alt	string	✅	-	Texto alt para la imagen (requerido para accesibilidad)
sources	{ light: string | ImageMetadata, dark: string | ImageMetadata }	✅	-	Objeto que contiene las fuentes de imagen para modo claro y oscuro
width	number	❌	-	Ancho de imagen en píxeles
height	number	❌	-	Alto de imagen en píxeles
loading	'lazy' | 'eager'	❌	'lazy'	Estrategia de carga de imagen
decoding	'async' | 'sync' | 'auto'	❌	'async'	Estrategia de decodificación de imagen
class	string	❌	''	Clases CSS adicionales para aplicar

Cómo Funciona

El componente renderiza dos componentes <Image>:

1. Imagen de modo claro: Visible en tema claro, oculta en tema oscuro (light:sl-block dark:sl-hidden)
2. Imagen de modo oscuro: Oculta en tema claro, visible en tema oscuro (light:sl-hidden dark:sl-block)

Ambas imágenes usan el componente <Image> optimizado de Astro, que proporciona:

• Optimización automática de imágenes
• Conversión de formato WebP/AVIF
• Generación de imágenes responsivas
• Carga perezosa por defecto
• Prevención de Cumulative Layout Shift (CLS)

Alias de Rutas de Imagen

El componente soporta el alias ~/images configurado en tu proyecto Astro:

astro.config.mjs

export default defineConfig({
  vite: {
    resolve: {
      alias: {
        "~/images": fileURLToPath(new URL("./src/assets/images", import.meta.url)),
      },
    },
  },
});

Esto te permite usar rutas como ~/images/my-image.svg en lugar de rutas relativas.

Clases CSS

El componente usa las clases de temas de Starlight:

• light:sl-block - Muestra elemento en modo claro
• dark:sl-hidden - Oculta elemento en modo oscuro
• light:sl-hidden - Oculta elemento en modo claro
• dark:sl-block - Muestra elemento en modo oscuro

Más Ejemplos

Aquí hay ejemplos adicionales mostrando diferentes casos de uso: