images

[bright rock]

Hi @bitter cradle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To install and use the <Picture /> component in Astro, follow these steps:

1. Install the @astrojs/image package by running the following command in your project directory:

npm install @astrojs/image

2. Import the Picture component in your .astro or .mdx file:

---
import { Picture } from '@astrojs/image/components';
---

3. Use the <Picture /> component in your Astro markup, providing the required attributes: src, widths, sizes, alt, and aspectRatio. You can also include optional properties as needed. For example:

<Picture
  src="/path/to/your/image.jpg"
  widths="[300, 600, 900]"
  sizes="(max-width: 600px) 50vw, 100vw"
  alt="A descriptive text for the image"
  aspectRatio="16/9"
/>

For more information on using the <Picture /> component and its attributes, refer to the Astro’s Image Integration (https://docs.astro.build/en/guides/images#astros-image-integration) and Picture component documentation (https://docs.astro.build/en/guides/integrations-guide/image/#picture-).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@bitter cradle kapa.ai is still learning and improving, please let us how it did by reacting below

[bitter cradle]

I did that typescript is saying it cant find the module '<@&1055234544183287879>/image/components' or its corresponding type declarations.ts(2307)