Skip to content

Commit

Permalink
docs(assets): Mention that images in the frontmatter are relative to …
Browse files Browse the repository at this point in the history
…the current file (withastro#2910)
  • Loading branch information
Princesseuh authored Mar 24, 2023
1 parent 42f4d69 commit 8bad900
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/content/docs/en/guides/assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ To avoid errors in your project, complete the following steps:
Change all `import` statements from `@astrojs/image/components` to `astro:assets` to use the new built-in `<Image />` component.

Remove any component attributes that are not [currently supported image asset properties](#properties).

For example `aspectRatio` is no longer supported, as it is now automatically inferred from the `width` and `height` attributes.

```astro title="src/components/MyComponent.astro" del= {2,11} ins={3}
Expand Down Expand Up @@ -145,12 +145,12 @@ To avoid errors in your project, complete the following steps:

### Update content collections schemas

You can now declare images in your frontmatter as their paths relative to the `src/assets/` folder.
You can now declare images in your frontmatter as their paths relative to the current folder.

```md title="src/content/blog/my-post.md"
---
title: "My first blog post"
cover: "firstpostcover.jpeg" # will resolve to "src/assets/firstblogcover.jpeg"
cover: "./firstpostcover.jpeg" # will resolve to "src/content/blog/firstblogcover.jpeg"
coverAlt: "A photograph of a sunset behind a mountain range"
---

Expand Down Expand Up @@ -273,7 +273,7 @@ If the image is merely decorative (i.e. doesn't contribute to the understanding

##### Additional properties

In addition to the properties above, the `<Image />` component accepts all properties accepted by the HTML `<img>` tag.
In addition to the properties above, the `<Image />` component accepts all properties accepted by the HTML `<img>` tag.

For example, you can provide a `class` to the final `img` element.

Expand Down

0 comments on commit 8bad900

Please sign in to comment.