diff --git a/src/provider.ts b/src/provider.ts index 46b2d2440..63cda46d1 100644 --- a/src/provider.ts +++ b/src/provider.ts @@ -81,7 +81,7 @@ export function detectProvider (userInput?: string) { return userInput } - if (process.env.VERCEL) { + if (process.env.VERCEL || process.env.VERCEL_ENV || process.env.NOW_BUILDER) { return 'vercel' } diff --git a/src/runtime/providers/vercel.ts b/src/runtime/providers/vercel.ts index 7b46aaf11..4b91d043f 100644 --- a/src/runtime/providers/vercel.ts +++ b/src/runtime/providers/vercel.ts @@ -3,11 +3,33 @@ import { stringifyQuery } from 'ufo' // https://vercel.com/docs/more/adding-your-framework#images -export const getImage: ProviderGetImage = (src, { modifiers, baseURL = '/_vercel/image' } = {}) => { +export const getImage: ProviderGetImage = (src, { modifiers, baseURL = '/_vercel/image' } = {}, ctx) => { + const validWidths = Object.values(ctx.options.screens || {}).sort() + const largestWidth = validWidths[validWidths.length - 1] + let width = Number(modifiers?.width || 0) + + if (!width) { + width = largestWidth + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line + console.warn(`A defined width should be provided to use the \`vercel\` provider. Defaulting to \`${largestWidth}\`. Warning originated from \`${src}\`.`) + } + } else if (!validWidths.includes(width)) { + width = validWidths.find(validWidth => validWidth > width) || largestWidth + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line + console.warn(`The width being used (\`${modifiers?.width}\`) should be added to \`image.screens\`. Defaulting to \`${width}\`. Warning originated from \`${src}\`.`) + } + } + + if (process.env.NODE_ENV === 'development') { + return { url: src } + } + return { url: baseURL + '?' + stringifyQuery({ url: src, - w: modifiers?.width ? String(modifiers.width) : undefined, + w: String(width), q: String(modifiers?.quality || '100') }) }