diff options
| -rw-r--r-- | .changeset/nine-radios-peel.md | 7 | ||||
| -rw-r--r-- | packages/integrations/vercel/src/image/build-service.ts | 4 | ||||
| -rw-r--r-- | packages/integrations/vercel/src/image/shared-dev-service.ts | 2 |
3 files changed, 12 insertions, 1 deletions
diff --git a/.changeset/nine-radios-peel.md b/.changeset/nine-radios-peel.md new file mode 100644 index 000000000..fece80eb9 --- /dev/null +++ b/.changeset/nine-radios-peel.md @@ -0,0 +1,7 @@ +--- +"@astrojs/vercel": patch +--- + +Fixes `widths` and `densities` not working when using Vercel's Image Optimization. + +Note that you still need to make sure that the widths you're outputting are enabled in [the `imageConfig` property of the Vercel adapter](https://docs.astro.build/en/guides/integrations-guide/vercel/#imagesconfig) in order for these properties to work. diff --git a/packages/integrations/vercel/src/image/build-service.ts b/packages/integrations/vercel/src/image/build-service.ts index bd58d3af6..7e991161a 100644 --- a/packages/integrations/vercel/src/image/build-service.ts +++ b/packages/integrations/vercel/src/image/build-service.ts @@ -1,7 +1,9 @@ import type { ExternalImageService } from 'astro'; import { isESMImportedImage, sharedValidateOptions } from './shared.js'; +import { baseService } from 'astro/assets'; const service: ExternalImageService = { + ...baseService, validateOptions: (options, serviceOptions) => sharedValidateOptions(options, serviceOptions.service.config, 'production'), getHTMLAttributes(options) { @@ -29,7 +31,7 @@ const service: ExternalImageService = { } } - const { src, width, height, format, quality, ...attributes } = props; + const { src, width, height, format, quality, densities, widths, formats, ...attributes } = options; return { ...attributes, diff --git a/packages/integrations/vercel/src/image/shared-dev-service.ts b/packages/integrations/vercel/src/image/shared-dev-service.ts index 4251603a7..8ca87e99a 100644 --- a/packages/integrations/vercel/src/image/shared-dev-service.ts +++ b/packages/integrations/vercel/src/image/shared-dev-service.ts @@ -1,7 +1,9 @@ import type { LocalImageService } from 'astro'; +import { baseService } from 'astro/assets'; import { sharedValidateOptions } from './shared.js'; export const baseDevService: Omit<LocalImageService, 'transform'> = { + ...baseService, validateOptions: (options, serviceOptions) => sharedValidateOptions(options, serviceOptions.service.config, 'development'), getURL(options) { |