#error with sizes on image

3 messages · Page 1 of 1 (latest)

tender apex
#

src/components/backgrounds/Hero.astro:21:3 - error ts(2322): Type '{ inferSize: true; src: string; alt: string; formats: string[]; fetchpriority: "high"; loading: "eager"; class: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'formats' does not exist on type '(IntrinsicAttributes & { [x: data-${string}]: any; prefix?: string | null | undefined; translate?: "" | "yes" | "no" | null | undefined; onclose?: string | null | undefined; ... 204 more ...; inferSize: true; }) | (IntrinsicAttributes & { ...; })'. Did you mean 'format'?

21 formats={['avif', 'webp']}

honest coveBOT
#

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

#

This error is related to the <Image /> component in Astro and its properties. The error suggests that you're using the formats property, which doesn't exist on the <Image /> component. Instead, you should be using the format property (singular).

To fix this error, you need to change formats to format in your <Image /> component. Here's how you can correct it:

<Image
  inferSize={true}
  src={yourImageSource}
  alt="Your alt text"
  format="avif"
  fetchpriority="high"
  loading="eager"
  class="your-class-name"
/>

Note that the format property accepts a single string value, not an array of formats. If you want to use multiple formats, you should consider using the <Picture /> component instead, which does support the formats property as described in the Astro docs (https://docs.astro.build/en/reference/modules/astro-assets/#picture-properties).

If you specifically need to use multiple formats with the <Image /> component, you might need to create multiple <Image /> components, one for each format you want to use.

Remember to always check the Astro documentation on the Image component (https://docs.astro.build/en/reference/modules/astro-assets/#image-) for the most up-to-date information on available properties and their correct usage.

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