-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
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.
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
Add assets page #2779
Add assets page #2779
Conversation
✅ Deploy Preview for astro-docs-2 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Awesome! I noticed there's no examples here about what changes with images in Markdown - I know you can now use relative images, does anything else change? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just leaving these to make link checker happy!
|
||
The `<Image />` component generates an `<img>` tag. | ||
|
||
This component can transform an image's dimensions, file type, and quality to produce an optimized image that avoids Content Layout Shift **(CLS)**. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Technically, it's not the generated image that avoids CLS, it's the img
tag generated by the Image
component.
|
||
### `getImage()` (`astro:assets`) | ||
|
||
This function is intended for generating images destined to be used somewhere else than directly in HTML, for example in CSS or in an [API Route](/en/core-concepts/endpoints/#server-endpoints-api-routes). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A major usage of getImage
is also if you want to create your own Image
component, might be worth a shoutout (the included Image component is basically just a call to getImage
!)
|
||
### Update your Markdown files | ||
|
||
Relative images can now be referenced in Markdown and MDX files. These will automatically be optimized and hashed by Astro's build process. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Relative images can now be referenced in Markdown and MDX files. These will automatically be optimized and hashed by Astro's build process. | |
Relative images can now be referenced in Markdown. These will automatically be optimized and hashed by Astro's build process. |
|
||
#### How this Works | ||
|
||
At build time for static sites, both `<Image/>` and `getImage(options)` call the `transform()` function. They pass options either through component attributes or an `options` argument, respectively. The transformed images will be built to a `dist/_astro` folder. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is also the case for pre-rendered routes, if you want to add an additional precision.
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
What kind of changes does this PR include?
Description
astro:assets
moduleOpen Questions