dense hedge
I'm getting really confused, I'm writing Astro with the Starlight theme. All 'posts' go in to /src/content/docs. For example, I'm working on the file /src/content/docs/equipment/sony.mdx.
Now I want to add images. From what I've read /src/assets/images/ is a good place to put them so I've dumped some in there.
But I can't for the life of me work out what URL these images should end up having! All I keep getting are 404s. 😦
jaunty estuaryBOT
Hi @dense hedge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I understand your confusion regarding image usage in Astro with the Starlight theme. Let's clarify how to properly reference and use images in your Astro project.
For MDX files in Astro, you have a few options to include images:
Using Markdown syntax:
You can use standard Markdown image syntax in your .mdx files. The path should be relative to your MDX file location. For example:
!**Alt text** (../../../assets/images/your-image.jpg)
This assumes your image is in /src/assets/images/ and your MDX file is in /src/content/docs/equipment/.
Using the Astro Image component:
For more control over your images, you can use Astro's Image component. First, import both the component and your image at the top of your MDX file:
---
import { Image } from 'astro:assets';
import myImage from '../../../assets/images/your-image.jpg';
---
<Image src={myImage} alt="Description of the image" />
This method allows you to use Astro's built-in image optimization features Images Guide (https://docs.astro.build/en/guides/images/#images-in-mdx-files).
Using public folder:
If you prefer, you can also place your images in the public folder. Images in this folder are served as-is and can be referenced with an absolute path from the root of your site:
!**Alt text** (/images/your-image.jpg)
This assumes your image is in public/images/.
Remember, when using local images in Astro (option 1 and 2), you need to use the correct relative path from your MDX file to the image file. The path ../../../ goes up three directory levels from your MDX file location to reach the src folder.
If you're still encountering 404 errors, double-check your file paths and make sure the image files exist in the locations you're referencing.