Skip to content

Docs 1508: Clarify src/assets is not required for Astro image optimization #1509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eremannisto wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Docs 1508: Clarify src/assets is not required for Astro image optimization #1509

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/src/content/pages/recipes/astro-images.mdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ Astro provides a [built-in `<Image />` component](https://docs.astro.build/en/gu

This guides walks you through the configuration needed to use the `<Image />` component with the [image field](/docs/fields/image) in Keystatic.

## The assets directory in Astro
## Storing images in Astro's `src/` directory

To make use of Astro's `<Image />` component, you need to store your images in the `src/assets` directory in your project.
To make use of Astro's `<Image />` component, you need to store your images somewhere within the `src/` directory of your project. A common convention is `src/assets`, but any subdirectory under `src/` will work.

You can do so using the `directory` option in the Keystatic config.
You can control where Keystatic stores images using the `directory` option in the Keystatic config.

{% aside icon="☝️" %}
We recommend creating a path alias for the `src/assets` directory in your `.tsconfig.json` file — it simplifies referencing the path to that directory:
We recommend creating a path alias for your images directory in your `.tsconfig.json` file — it simplifies referencing the path to that directory. Here's an example using the common `src/assets` convention:

```ts
// .tsconfig.json
Expand Down Expand Up @@ -56,7 +56,7 @@ image: fields.image({
})
```

As long as the image path stored is within the `src/assets` directory, Astro will be able to process it into image metadata that the `<Image />` component can use.
As long as the image path stored is within the `src/` directory, Astro will be able to process it into image metadata that the `<Image />` component can use.

---

Expand Down Expand Up @@ -90,7 +90,7 @@ Using Astro assets within [content components](/docs/content-components) is a li
Since the image is not stored in the frontmatter data but directly within the content body, you'll need to dynamically import the image inside the component you're using to render that content component.

{% aside icon="⚠️" %}
The `publicPath` for those images must start with `/src/assets` for the dynamic import to work in Astro 😅
The `publicPath` for those images must start with `/src/` for the dynamic import to work in Astro.
{% /aside %}

Here's how you should configure the image field inside content components:
Expand All @@ -104,7 +104,7 @@ captionImage: block({
label: 'Image',
directory: 'src/assets/images/posts',

// start with /src/assets
// start with /src/
publicPath: '/src/assets/images/posts/'

}),
Expand Down