redacted

[vivid cairn]

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

[buoyant sonnet]

Can you show code?

[vivid cairn]

---

Yes, when using images from the public/ directory in Astro, you need to provide either both width and height, or one dimension and an aspectRatio attribute. This is because images from the public/ directory are treated as remote images, and for remote images, Astro needs to be able to calculate dimensions for the optimized image. This is done to avoid cumulative layout shift (CLS) during page loading.

Here's an example of how you can use an image from the public/ directory:

---import { Image } from '@astrojs/image/components';import socialImage from '/social.png';---
<Image src={socialImage} width={1280} aspectRatio="16:9" alt="descriptive text" />

In this example, the width is provided, and the aspectRatio is used to calculate the height. You can also provide both width and height directly.

If you don't provide these dimensions, your image might not display correctly when you run npm run preview, even though it appears fine with npm run dev.

For more information, you can refer to the Astro documentation on images (https://docs.astro.build/en/guides/integrations-guide/image/).

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

@azure sorrel kapa.ai is still learning and improving, please let us know how it did by reacting below

[buoyant sonnet]

I think you just need a / in front of assets

so <img src="/assets/img/icon.svg" alt="alt text"/>

Hmm, is there a repo I could check out?

This should definitely be working for a simple image in public

Thanks, I'll try it out on my end

Hmm, everything seems to be working for me

Is this a SSG website?