summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.changeset/nine-radios-peel.md7
-rw-r--r--packages/integrations/vercel/src/image/build-service.ts4
-rw-r--r--packages/integrations/vercel/src/image/shared-dev-service.ts2
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) {