feat(cloudimage): make baseURL optional with cdn

docs/content/3.providers/cloudimage.md

@@ -10,14 +10,14 @@ links:
 
 Integration between [Cloudimage](https://www.cloudimage.io/en/home) and the image module.
 
-To use this provider you need to specify your Cloudimage `token` and the `baseURL` of your image storage.
+To use this provider you need to specify either your Cloudimage `token` (with optional `apiVersion`) or a full `cdnURL`. The `baseURL` of your image storage is optional and is only used when the passed `src` is not an absolute URL. When using absolute URLs, the provider will use the `cdnURL` directly without prepending the `baseURL`.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   image: {
     cloudimage: {
       token: 'your_cloudimage_token',
-      baseURL: 'origin_image_url' // or alias
+      baseURL: 'origin_image_url' // or alias (optional)
     }
   }
 })
@@ -33,9 +33,9 @@ Your Cloudimage customer token. [Register](https://www.cloudimage.io/en/register
 
 ### `baseURL`
 
-- Type: **String** (required)
+- Type: **String** (optional)
 
-Your origin image URL or storage alias that allows to shorten your origin image URLs.
+Your origin image URL or storage alias that allows to shorten your origin image URLs. If not provided, the provider will fall back to base App URL for relative URLs, or use the `cdnURL` directly for absolute URLs.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -93,7 +93,23 @@ export default defineNuxtConfig({
 - Type: **String**
 - Default: `https://{token}.cloudimg.io/{apiVersion}`
 
-Replaces the dynamically built URL
+Replaces the dynamically built URL. Useful when you prefer not to provide a `token` or need a custom CDN hostname.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  image: {
+    cloudimage: {
+      cdnURL: 'https://demo.cloudimg.io/v7'
+    }
+  }
+})
+```
+
+When only `cdnURL` is provided and `baseURL` is omitted, relative sources will fallback to the website's base URL, for example `src: '/test.png'` becomes `https://demo.cloudimg.io/v7/{website-base-url}/test.png`. When using absolute URLs with `cdnURL`, the provider will use the CDN URL directly without prepending any base URL.
+
+### Examples
+
+**Using absolute URLs with cdnURL:**
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -105,6 +121,25 @@ export default defineNuxtConfig({
 })
 ```
 
+With this configuration:
+
+- `src: 'https://example.com/image.jpg'` becomes `https://demo.cloudimg.io/v7/https://example.com/image.jpg`
+- `src: '/local/image.jpg'` becomes `https://demo.cloudimg.io/v7/{website-base-url}/local/image.jpg`
+
+**Using token with automatic baseURL fallback:**
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  image: {
+    cloudimage: {
+      token: 'demo',
+      apiVersion: 'v7'
+      // baseURL will automatically fall back to the website's base URL
+    }
+  }
+})
+```
+
 ## Cloudimage Modifiers
 
 Beside the [standard modifiers](/usage/nuxt-img#modifiers), also you can pass Cloudimage-specific [Cloudimage-specific transformation](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction) params to `modifiers` prop.

src/runtime/providers/cloudimage.ts

@@ -20,9 +20,9 @@ const operationsGenerator = createOperationsGenerator({
 })
 
 interface CloudimageOptions {
-  baseURL: string
   token: string
   apiVersion?: string
+  baseURL?: string
   cdnURL?: string
 }
 
@@ -34,17 +34,13 @@ export default defineProvider<CloudimageOptions>({
     token = '',
     apiVersion = '',
     cdnURL = '',
-  }) => {
+  }, ctx) => {
     const operations = operationsGenerator(modifiers)
     const query = (operations ? ('?' + operations) : '')
 
     if (import.meta.dev) {
       const warning = []
 
-      if (!baseURL) {
-        warning.push('<baseURL>')
-      }
-
       if (!token && !cdnURL) {
         warning.push('<token> or <cdnURL>')
       }
@@ -63,10 +59,14 @@ export default defineProvider<CloudimageOptions>({
 
     if (hasProtocol(src)) {
       return {
-        url: joinURL(src) + query,
+        url: joinURL(cdnURL, src) + query,
       }
     }
 
+    if (!baseURL) {
+      baseURL = ctx.options.nuxt.baseURL
+    }
+
     return {
       url: joinURL(cdnURL, baseURL, src) + query,
     }

test/e2e/__snapshots__/cloudimage.json5

@@ -1,12 +1,12 @@
 {
   "requests": [
-    "https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit",
+    "https://demo.cloudimg.io/v7/https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit",
     "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit",
     "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop",
     "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover",
   ],
   "sources": [
-    "https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit",
+    "https://demo.cloudimg.io/v7/https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit",
     "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit",
     "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop",
     "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover",

test/nuxt/providers.test.ts

@@ -487,6 +487,14 @@ describe('Providers', () => {
       const generated = cloudimage().getImage(src, { modifiers, ...providerOptions }, emptyContext)
       expect(generated).toMatchObject(image.cloudimage)
     }
+
+    const nonBaseURLProviderOptions = {
+      token: 'demo',
+      apiVersion: 'v7',
+    }
+    const src = 'https://localhost' + images[0].args[0]
+    const generated = cloudimage().getImage(src, { modifiers: { ...images[0].args[1] }, ...nonBaseURLProviderOptions }, emptyContext)
+    expect(generated).toMatchObject({ url: 'https://demo.cloudimg.io/v7/https://localhost/test.png' })
   })
 
   it('storyblok', () => {