feat(provider/cloudimage): make baseURL optional and route absolute src via CDN

Author: s8n11c

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.
 
 ```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 `src` will be joined directly with the computed `cdnURL`.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -93,7 +93,7 @@ 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({
@@ -105,6 +105,8 @@ export default defineNuxtConfig({
 })
 ```
 
+When only `cdnURL` is provided and `baseURL` is omitted, relative sources are resolved directly against the CDN URL, for example `src: '/test.png'` becomes `https://demo.cloudimg.io/v7/test.png`.
+
 ## 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

@@ -1,74 +1,69 @@
-import { joinURL, hasProtocol } from 'ufo'
-import { createOperationsGenerator } from '../utils/index'
-import { defineProvider } from '../utils/provider'
+import { joinURL, hasProtocol } from "ufo";
+import { createOperationsGenerator } from "../utils/index";
+import { defineProvider } from "../utils/provider";
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {
-    fit: 'func',
-    quality: 'q',
-    format: 'force_format',
+    fit: "func",
+    quality: "q",
+    format: "force_format",
   },
   valueMap: {
     fit: {
-      cover: 'crop',
-      contain: 'fit',
-      fill: 'cover',
-      inside: 'bound',
-      outside: 'boundmin',
+      cover: "crop",
+      contain: "fit",
+      fill: "cover",
+      inside: "bound",
+      outside: "boundmin",
     },
   },
-})
+});
 
 interface CloudimageOptions {
-  baseURL: string
-  token: string
-  apiVersion?: string
-  cdnURL?: string
+  token: string;
+  apiVersion?: string;
+  baseURL?: string;
+  cdnURL?: string;
 }
 
 // https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction
 export default defineProvider<CloudimageOptions>({
-  getImage: (src, {
-    modifiers,
-    baseURL,
-    token = '',
-    apiVersion = '',
-    cdnURL = '',
-  }) => {
-    const operations = operationsGenerator(modifiers)
-    const query = (operations ? ('?' + operations) : '')
+  getImage: (
+    src,
+    { modifiers, baseURL, token = "", apiVersion = "", cdnURL = "" }
+  ) => {
+    const operations = operationsGenerator(modifiers);
+    const query = operations ? "?" + operations : "";
 
     if (import.meta.dev) {
-      const warning = []
-
-      if (!baseURL) {
-        warning.push('<baseURL>')
-      }
+      const warning = [];
 
       if (!token && !cdnURL) {
-        warning.push('<token> or <cdnURL>')
+        warning.push("<token> or <cdnURL>");
       }
 
       if (warning.length > 0) {
-        console.warn(`[cloudimage] ${warning.join(', ')} is required to build image URL`)
+        console.warn(
+          `[cloudimage] ${warning.join(", ")} is required to build image URL`
+        );
         return {
-          url: joinURL('<token>', '<baseURL>', src) + query,
-        }
+          url: joinURL("<token>", "<baseURL>", src) + query,
+        };
       }
     }
 
     if (!cdnURL) {
-      cdnURL = `https://${token}.cloudimg.io/${apiVersion}`
+      cdnURL = `https://${token}.cloudimg.io/${apiVersion}`;
     }
 
-    if (hasProtocol(src)) {
+    if (hasProtocol(src) || !baseURL) {
       return {
-        url: joinURL(src) + query,
-      }
+        url: joinURL(cdnURL, src) + query,
+      };
     }
 
     return {
       url: joinURL(cdnURL, baseURL, src) + query,
-    }
+    };
   },
-})
+});