Getting Started with Astrox

Astro is a modern static site generator that allows you to build fast websites with your favorite JavaScript frameworks. In this post, we’ll explore the basics of getting started with Astro.

Why Choose Astro?

Astro provides several key benefits:

• Zero JavaScript by default: Only ship JavaScript when you need it
• Component Islands: Use any UI framework (React, Vue, Svelte, etc.)
• Built-in performance: Automatic optimization and lazy loading
• Developer experience: TypeScript support, hot reload, and more

Getting Started

---

1. Vite Dynamic Import Limitation

• Vite (used by Astro) does not support fully dynamic import paths for assets. The import path must be statically analyzable, meaning you can’t use variables for the folder or filename in the import statement.
• The warning:

  invalid import "../../content/blog/${post.slug}/${post.data.heroImage}". A file extension must be included in the static part of the import.

• This means you cannot dynamically import images from the content folder using variables for both the folder and filename.

2. /_image 404 Error

• This usually means the Astro Image integration is not able to find or process the image, often because the import failed or the path is not valid.

---

How to Fix This?

Astro’s Image Component requires static imports

You must import images statically at the top of your file, like:

import heroImage from '../../content/blog/post1/image-1.webp';

But you can’t do this dynamically for every post in a single [post].astro file.

---

Best Practice for Astro Content Collections + Image Optimization

Option 1: Use Public Directory for Hero Images

• Place hero images in public/images/blog/
• Reference them in frontmatter as /images/blog/image-1.webp
• Use a regular <img src={post.data.heroImage} /> (not optimized, but works for dynamic content)

Option 2: Use Astro Image for Static Pages Only

• If you want optimization, you must statically import the image in each page/component.
• This is not possible for dynamic [post].astro routes unless you predefine all possible imports (which is not scalable).

Option 3: Use Markdown for Inline Images

• For images inside markdown, just use the markdown syntax:
  ![Alt text](./image-1.webp)
  This works, but is not optimized.