fix(cloudflare): handle app.baseURL and external image sources

Author: adamkasper

src/runtime/providers/cloudflare.ts

@@ -1,4 +1,4 @@
-import { encodeQueryItem, joinURL } from 'ufo'
+import { encodeQueryItem, hasProtocol, joinURL } from 'ufo'
 import { createOperationsGenerator } from '../utils/index'
 import { defineProvider } from '../utils/provider'
 
@@ -36,20 +36,20 @@ interface CloudflareOptions {
   baseURL?: string
 }
 
-// https://developers.cloudflare.com/images/image-resizing/url-format/
+// https://developers.cloudflare.com/images/transform-images/transform-via-url/
 export default defineProvider<CloudflareOptions>({
-  getImage: (src, {
-    modifiers,
-    baseURL = '/',
-  }) => {
+  getImage: (src, { modifiers, baseURL = '/' }, ctx) => {
     const mergeModifiers = { ...defaultModifiers, ...modifiers }
     const operations = operationsGenerator(mergeModifiers as any)
 
+    const isExternal = hasProtocol(src)
+    const sourcePath = isExternal ? src : joinURL(ctx.options.nuxt.baseURL, src)
+
     // https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
-    const url = operations ? joinURL(baseURL, 'cdn-cgi/image', operations, src) : src
+    const url = operations
+      ? joinURL(baseURL, 'cdn-cgi/image', operations, sourcePath)
+      : sourcePath
 
-    return {
-      url,
-    }
+    return { url }
   },
 })

test/nuxt/providers.test.ts

@@ -109,6 +109,72 @@ describe('Providers', () => {
     }
   })
 
+  it('cloudflare with app.baseURL', () => {
+    const ctx = { options: { ...emptyContext.options, nuxt: { baseURL: '/admin/' } } } as any
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: '/',
+    }, ctx)).toMatchObject({ url: '/cdn-cgi/image/w=200/admin/images/test.png' })
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: {},
+      baseURL: '/',
+    }, ctx)).toMatchObject({ url: '/admin/images/test.png' })
+  })
+
+  it('cloudflare with external image', () => {
+    expect(cloudflare().getImage('https://external.com/photo.jpg', {
+      modifiers: { width: 200 },
+      baseURL: '/',
+    }, emptyContext)).toMatchObject({ url: '/cdn-cgi/image/w=200/https://external.com/photo.jpg' })
+
+    expect(cloudflare().getImage('https://external.com/photo.jpg', {
+      modifiers: {},
+      baseURL: '/',
+    }, emptyContext)).toMatchObject({ url: 'https://external.com/photo.jpg' })
+  })
+
+  it('cloudflare cross-zone', () => {
+    const ctx = { options: { ...emptyContext.options, nuxt: { baseURL: '/' } } } as any
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: 'https://abc.cz',
+    }, ctx)).toMatchObject({ url: 'https://abc.cz/cdn-cgi/image/w=200/images/test.png' })
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: {},
+      baseURL: 'https://abc.cz',
+    }, ctx)).toMatchObject({ url: '/images/test.png' })
+  })
+
+  it('cloudflare cross-zone with app.baseURL', () => {
+    const ctx = { options: { ...emptyContext.options, nuxt: { baseURL: '/admin/' } } } as any
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: 'https://abc.cz',
+    }, ctx)).toMatchObject({ url: 'https://abc.cz/cdn-cgi/image/w=200/admin/images/test.png' })
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: {},
+      baseURL: 'https://abc.cz',
+    }, ctx)).toMatchObject({ url: '/admin/images/test.png' })
+  })
+
+  it('cloudflare cross-zone with external src', () => {
+    expect(cloudflare().getImage('https://123.cz/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: 'https://abc.cz',
+    }, emptyContext)).toMatchObject({ url: 'https://abc.cz/cdn-cgi/image/w=200/https://123.cz/images/test.png' })
+
+    expect(cloudflare().getImage('https://123.cz/images/test.png', {
+      modifiers: {},
+      baseURL: 'https://abc.cz',
+    }, emptyContext)).toMatchObject({ url: 'https://123.cz/images/test.png' })
+  })
+
   it('cloudinary', () => {
     const providerOptions = {
       baseURL: '/',