diff --git a/src/runtime/providers/fastly.ts b/src/runtime/providers/fastly.ts index 598e3ced1..9335a708b 100644 --- a/src/runtime/providers/fastly.ts +++ b/src/runtime/providers/fastly.ts @@ -1,4 +1,4 @@ -import { joinURL } from 'ufo' +import { parseQuery, withBase, withQuery } from 'ufo' import { createOperationsGenerator } from '../utils/index' import { defineProvider } from '../utils/provider' @@ -22,7 +22,10 @@ export default defineProvider({ getImage: (src, { modifiers, baseURL = '/' }) => { const operations = operationsGenerator(modifiers) return { - url: joinURL(baseURL, src + (operations ? ('?' + operations) : '')), + url: withBase( + withQuery(src, parseQuery(operations)), + baseURL, + ), } }, }) diff --git a/test/nuxt/providers.test.ts b/test/nuxt/providers.test.ts index 6028fe822..21e7c6b25 100644 --- a/test/nuxt/providers.test.ts +++ b/test/nuxt/providers.test.ts @@ -225,6 +225,20 @@ describe('Providers', () => { } }) + it('fastly with absolute url and preexisting query params', () => { + const providerOptions = { + baseURL: '', + } + + const originalUrl = 'https://www.fastly.io/image.jpg?v=123' + + for (const image of images) { + const [, modifiers] = image.args + const generated = fastly().getImage(originalUrl, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.fastlyAbsoluteUrl) + } + }) + it('gumlet', () => { const providerOptions = { baseURL: '', diff --git a/test/providers.ts b/test/providers.ts index 6f497c421..122d0183e 100644 --- a/test/providers.ts +++ b/test/providers.ts @@ -9,6 +9,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto/test' }, twicpics: { url: '/test.png' }, fastly: { url: '/test.png' }, + fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123' }, filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b' }, glide: { url: '/test.png' }, github: { url: 'npm' }, @@ -50,6 +51,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,w_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x-' }, fastly: { url: '/test.png?width=200' }, + fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200' }, filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200' }, github: { url: 'https://avatars.githubusercontent.com/npm?v=4' }, glide: { url: '/test.png?w=200' }, @@ -91,6 +93,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=-x200' }, fastly: { url: '/test.png?height=200' }, + fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&height=200' }, filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?h=200' }, glide: { url: '/test.png?h=200' }, gumlet: { url: '/test.png?h=200' }, @@ -131,6 +134,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' }, twicpics: { url: '/test.png?twic=v1/cover=200x200' }, fastly: { url: '/test.png?width=200&height=200' }, + fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200&height=200' }, filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200' }, glide: { url: '/test.png?w=200&h=200' }, gumlet: { url: '/test.png?w=200&h=200' }, @@ -171,6 +175,7 @@ export const images = [ cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/inside=200x200' }, fastly: { url: '/test.png?width=200&height=200&fit=bounds' }, + fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200&height=200&fit=bounds' }, filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200&func=fit' }, glide: { url: '/test.png?w=200&h=200&fit=contain' }, gumlet: { url: '/test.png?w=200&h=200&fit=fill' }, @@ -211,6 +216,7 @@ export const images = [ cloudinary: { url: '/f_jpg,q_auto,w_200,h_200,c_scale/test' }, twicpics: { url: '/test.png?twic=v1/output=jpeg/inside=200x200' }, fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' }, + fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200&height=200&fit=bounds&format=jpeg' }, filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200&func=fit&force_format=jpeg' }, glide: { url: '/test.png?w=200&h=200&fit=contain&fm=jpeg' }, gumlet: { url: '/test.png?w=200&h=200&fit=fill&format=jpeg' },