From 5491421c41eb2d44da6c3103b13d6e5c60af5b1a Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Tue, 21 Mar 2023 14:10:38 +0100 Subject: [PATCH] feat(image_services): Add mention of new validateOptions hook (#2859) --- .../en/reference/image-service-reference.mdx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx index 889d73e2d3341..5433b1fc9439c 100644 --- a/src/content/docs/en/reference/image-service-reference.mdx +++ b/src/content/docs/en/reference/image-service-reference.mdx @@ -18,13 +18,13 @@ Astro provides two types of image services: Local and External. ## Building using the Image Services API -Service definitions take the shape of an exported default object with various required methods ("hooks"). +Service definitions take the shape of an exported default object with various required methods ("hooks"). External services provide a `getURL()` that points to the `src` of the output `` tag. -Local services provide a `transform()` method to perform transformations on your image, and `getURL()` and `parseURL()` methods to use an endpoint for dev mode and SSR. +Local services provide a `transform()` method to perform transformations on your image, and `getURL()` and `parseURL()` methods to use an endpoint for dev mode and SSR. -Both types of services can provide `getHTMLAttributes()` to determine the other attributes of the output ``. +Both types of services can provide `getHTMLAttributes()` to determine the other attributes of the output `` and `validateOptions()` to validate and augment the passed options. ### External Services @@ -112,9 +112,9 @@ const service: LocalImageService = { export default service; ``` -At build time for static sites and pre-rendered routes, both `` 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. +At build time for static sites and pre-rendered routes, both `` 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. -In dev mode and SSR mode, Astro doesn't know ahead of time which images need to be optimized. Astro uses a GET endpoint (by default, (`/_image`) to process the images at runtime. `` and `getImage()` pass their options to `getURL()`, which will return the endpoint URL. Then, the endpoint calls `parseURL()` and passes the resulting properties to `transform()`. +In dev mode and SSR mode, Astro doesn't know ahead of time which images need to be optimized. Astro uses a GET endpoint (by default, `/_image`) to process the images at runtime. `` and `getImage()` pass their options to `getURL()`, which will return the endpoint URL. Then, the endpoint calls `parseURL()` and passes the resulting properties to `transform()`. #### getConfiguredImageService @@ -135,12 +135,13 @@ export const get: APIRoute = async ({ request }) => { headers: { 'Content-Type': mime.getType(format) || '' } + } ); } ``` [See the built-in endpoint](https://github.com/withastro/astro/blob/main/packages/astro/src/assets/image-endpoint.ts) for a full example. - + ## Hooks @@ -196,6 +197,14 @@ You must return a `format` to ensure that the proper MIME type is served to user This hook returns all additional attributes used to render the image as HTML, based on the parameters passed by the user (`options`). +### `validateOptions()` + +**Optional for both local and external services** + +`validateOptions(options: ImageTransform): ImageTransform` + +This hook allows you to validate and augment the options passed by the user. This is useful for setting default options, or telling the user that a parameter is required. + ## User configuration Configure the image service to use in `astro.config.mjs`. The config takes the following form: