docs: add clearer examples of making a custom provider (#1074)

docs/content/4.advanced/1.custom-provider.md

@@ -7,18 +7,27 @@ description: If a CDN provider is not supported, you can define it yourself.
 
 The runtime will receive a source, image modifiers and its provider options. It is responsible for generating a url for optimized images, and needs to be isomorphic because it may be called on either server or client.
 
-```js
+```ts  [providers/my-provider.ts]
 import { joinURL } from 'ufo'
+import type { ProviderGetImage } from '@nuxt/image'
+import { createOperationsGenerator } from '#image'
 
-// import {} from '#image'
+const operationsGenerator = createOperationsGenerator()
+
+export const getImage: ProviderGetImage = (
+  src,
+  { modifiers = {}, baseURL } = {}
+) => {
+
+  if (!baseURL) {
+    // also support runtime config 
+    baseURL = useRuntimeConfig().public.siteUrl
+  }
+
+  const operations = operationsGenerator(modifiers)
 
-export function getImage(src, { modifiers, baseURL } = {}, { options, $img }) {
-  const { width, height, format, fit, ...providerModifiers } = modifiers
-  const operations = []
-  // process modifiers
-  const operationsString = operations.join(',')
   return {
-    url: joinURL(baseURL, operationsString, src)
+    url: joinURL(baseURL, src + (operations ? '?' + operations : '')),
   }
 }
 ```
@@ -43,21 +52,31 @@ export function getImage(src, { modifiers, baseURL } = {}, { options, $img }) {
 
 After you create your own provider, you should register it in the `nuxt.config`. In order to do that create a property inside `image.provider`.
 
-```js
-export default {
-  ...
+```ts  [nuxt.config.ts]
+export default defineNuxtConfig({
+  // ...
   image: {
     providers: {
-      customProvider: {
-        name: 'customProvider', // optional value to overrider provider name
-        provider: '~/providers/custom', // Path to custom provider
+      myProvider: {
+        name: 'myProvider', // optional value to overrider provider name
+        provider: '~/providers/my-provider.ts', // Path to custom provider
         options: {
           // ... provider options
+          baseURL: "https://site.com"
         }
       }
     }
   }
-}
+})
+```
+
+There are plenty of useful utilities that can be used to write providers by importing from `#image`. See [src/runtime/providers](https://github.com/nuxt/image/tree/dev/src/runtime/providers) for more info.
+
+### Usage 
+Set attribute `provider` as your custom provider name. 
+
+```vue  [pages/index.vue]
+<NuxtImg provider="myProvider" src="/image.png" >
+<!-- <img src="https://site.com/image.png" /> -->
 ```
 
-There are plenty of useful utilities that can be used to write providers by importing from `#img`. See [src/runtime/providers](https://github.com/nuxt/image/tree/dev/src/runtime/providers) for more info.