diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx index c77da89618558..81089315aefba 100644 --- a/src/content/docs/en/reference/image-service-reference.mdx +++ b/src/content/docs/en/reference/image-service-reference.mdx @@ -284,6 +284,33 @@ export default defineConfig({ }); ``` +## Typing custom image service props + +

+ +If your image service supports additional props in Astro’s `` component, `` component, or the `getImage()` function, you can add types for these by extending the `Astro.CustomImageProps` interface. + +For example, to add a custom `blur` prop that your image service supports: + +```ts +declare namespace Astro { + interface CustomImageProps { + /** Apply a Gaussian blur with this radius to the image. */ + blur?: number; + } +} +``` + +You can expose these types to users by making your image service an [Astro integration](/en/reference/integrations-reference/) and using the [`injectTypes()`](/en/reference/integrations-reference/#injecttypes-option) helper. + +Then, users will be able to get autocomplete and type safety for your custom props: + +```astro + +// ^^^^^^^^^^ +// Type 'string' is not assignable to type 'number | undefined'. +``` + ## Utilities Astro exposes a number of helper functions that can be used to develop a custom image service. These utilities can be imported from `astro/assets/utils`: