#what is wrong here ?

1 messages · Page 1 of 1 (latest)

shy bronzeBOT
#

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

#

The error you're encountering is related to how you're using the inferSize property with a local image in Astro. The inferSize property is only meant to be used with remote images, not with locally imported images.

When you import a local image in Astro (like your vagamonPhoto), Astro already knows its dimensions automatically. The inferSize property is specifically designed for remote images where Astro can't determine the dimensions without fetching the image.

According to the Astro documentation, inferSize should only be used when:

  • You're using a remote image (URL)
  • You don't know the dimensions of the image
  • You want Astro to fetch and determine those dimensions for you

To fix this error, simply remove the inferSize={true} property from your Image component:

<Image
  src={vagamonPhoto}
  alt={"Flying in Vagamon"}
  class:list={"aspect-[7/5] w-[37rem] max-w-none rounded-2xl bg-gray-50 object-cover"}
  slot="image1"
/>

The width and height properties will be automatically inferred from your local image import, so you don't need to specify them or use inferSize.

Astro Assets Documentation mentions that inferSize is specifically for remote images, and the width and height documentation confirms that dimensions are automatically inferred from image files located in src/.

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

#

@potent mason Kapa.ai is still learning and improving, please let me know how I did by reacting below.

potent mason
#

@shy bronze is it not possible to optimise images inside public folder ?

shy bronzeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

No, it's not possible to optimize images inside the public/ folder in Astro. According to the documentation, images in the public/ folder are never processed or optimized.

The Astro documentation clearly states:

Files in the public/ directory are always served or copied into the build folder as-is, with no processing. Images Guide

And specifically about image optimization:

Images stored in the public/ folder are never optimized. Images in Markdown Files

This is also reinforced in the documentation about responsive images:

Images in your public/ folder are never optimized, and responsive images are not supported. Experimental Responsive Images

If you want your images to be optimized, you should move them from the public/ folder to the src/ directory. Images in src/ can be imported and used with Astro's <Image /> component or in Markdown files to take advantage of Astro's image optimization features.

For images that need to remain in public/, you can still reference them in your components, but they won't receive any optimization:

<img src="/images/my-public-image.png" alt="Description" />

Or if you want to use the <Image /> component for consistent authoring experience:

<Image 
  src="/images/my-public-image.png" 
  alt="Description" 
  width={200} 
  height={150} 
/>
#

Note that when using the <Image /> component with images from public/, you must manually specify the width and height attributes since Astro cannot analyze these files.

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

#

@potent mason Kapa.ai is still learning and improving, please let me know how I did by reacting below.