Images in MD files.

[kindred pond]

I'm using images in my markdown file using the format:

I'm trying to use getStaticPaths to create all the posts for those markdown files, however, I am being told "Missing width and height attributes". I don't set those in the markdown file. Do I need to.

[vagrant geyser]

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

---

Yes, you need to specify the width and height attributes for remote images when using Astro. This is required to avoid cumulative layout shift (CLS). For remote images, width and height cannot automatically be inferred from the original file. To avoid CLS, either specify these two properties, or set inferSize to true to fetch a remote image’s original dimensions (source (https://docs.astro.build/en/reference/errors/missing-image-dimension/#_top)).

However, if your image is inside your src folder, you probably meant to import it instead. See the Imports guide for more information (https://docs.astro.build/en/guides/imports/#other-assets).

For images in markdown files, you can use the standard Markdown !**alt** (src) syntax. This syntax works with Astro’s Image Service API to optimize your local images stored in src/. Remote images and images stored in the public/ folder are not optimized (source (https://docs.astro.build/en/guides/images/#images-in-markdown-files)).

If you require more control over your image attributes, you can use the .mdx file format, which allows you to include Astro’s <Image /> component or a JSX <img /> tag in addition to the Markdown syntax (source (https://docs.astro.build/en/guides/images/#images-in-markdown-files)).

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

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

[kindred pond]

@vagrant geyser The images are in the src folder. And I am using the correct sintax of .

[vagrant geyser]

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

---

If your images are in the src folder and you're using the correct syntax !**alt** (src), then you're on the right track. Astro v3 allows you to reference relative images from your project src/ in Markdown, MDX, and Markdoc using this standard Markdown syntax (source (https://docs.astro.build/en/guides/upgrade-to/v3/#update-your-markdown-mdx-and-markdoc-files)).

However, if you're still encountering issues, it might be due to the specific path you're using. Make sure the path to the image is correct relative to the markdown file. For example, if your markdown file is in src/pages/posts/post-1.md and your image is in src/images/stars.png, you would reference it like this:

!**A starry night sky.** (../../images/stars.png)

If you require more control over your image attributes, consider using the .mdx file format, which allows you to include Astro’s <Image /> component or a JSX <img /> tag in addition to the Markdown syntax (source (https://docs.astro.build/en/guides/images/#images-in-markdown-files)).

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