feat: support Netlify Image CDN

.gitignore

@@ -10,3 +10,6 @@ sw.*
 .idea
 .vercel
 .output
+
+# Local Netlify folder
+.netlify

docs/pages/index.vue

@@ -16,7 +16,7 @@ useSeoMeta({
 const source = ref('npm i @nuxt/image')
 const { copy, copied } = useClipboard({ source })
 
-const providers = ['caisy', 'bunny', 'cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel', 'weserv']
+const providers = ['caisy', 'bunny', 'cloudflare', 'cloudimage', 'cloudinary', 'directus', 'edgio', 'fastly', 'glide', 'gumlet', 'hygraph', 'imageengine', 'imagekit', 'imgix', 'ipx', 'netlify', 'netlifyImageCdn', 'netlifyLargeMedia', 'prepr', 'prismic', 'sanity', 'storyblok', 'strapi', 'twicpics', 'unsplash', 'uploadcare', 'vercel', 'weserv']
 // Disabling because svg to png does not work now with SSG
 // Related issue: https://github.com/unjs/ipx/issues/160
 // const img = useImage()

playground/nuxt.config.ts

@@ -74,7 +74,8 @@ export default defineNuxtConfig({
     imagekit: {
       baseURL: 'https://ik.imagekit.io/demo'
     },
-    netlify: {
+    netlify: {},
+    netlifyLargeMedia: {
       baseURL: 'https://netlify-photo-gallery.netlify.app'
     },
     layer0: {

playground/providers.ts

@@ -333,17 +333,32 @@ export const providers: Provider[] = [
       }
     ]
   },
-  // Netlify
   {
-    name: 'netlify',
+    name: 'netlifyImageCdn',
     samples: [
       {
-        src: '/images/apple.jpg',
+        src: '/images/colors.jpg',
+        width: 100,
+        height: 100,
+        fit: 'cover'
+      },
+      {
+        src: '/images/colors.jpg',
+        width: 400,
+        height: 300
+      }
+    ]
+  },
+  {
+    name: 'netlifyLargeMedia',
+    samples: [
+      {
+        src: '/images/colors.jpg',
         width: 101,
         fit: 'contain'
       },
       {
-        src: '/images/apple.jpg',
+        src: '/images/colors.jpg',
         width: 200,
         height: 200,
         fit: 'fill'

src/provider.ts

@@ -32,6 +32,8 @@ const BuiltInProviders = [
   'ipxStatic',
   'layer0',
   'netlify',
+  'netlifyLargeMedia',
+  'netlifyImageCdn',
   'prepr',
   'none',
   'prismic',
@@ -118,6 +120,10 @@ export async function resolveProvider (_nuxt: any, key: string, input: InputProv
     input.provider = input.name
   }
 
+  if (input.provider in normalizableProviders) {
+    input.provider = normalizableProviders[input.provider]!()
+  }
+
   const resolver = createResolver(import.meta.url)
   input.provider = BuiltInProviders.includes(input.provider as ImageProviderName)
     ? await resolver.resolve('./runtime/providers/' + input.provider)
@@ -136,7 +142,14 @@ export async function resolveProvider (_nuxt: any, key: string, input: InputProv
 
 const autodetectableProviders: Partial<Record<ProviderName, ImageProviderName>> = {
   vercel: 'vercel',
-  aws_amplify: 'awsAmplify'
+  aws_amplify: 'awsAmplify',
+  netlify: 'netlify'
+}
+
+const normalizableProviders: Partial<Record<string, () => ImageProviderName>> = {
+  netlify: () => {
+    return process.env.NETLIFY_LFS_ORIGIN_URL ? 'netlifyLargeMedia' : 'netlifyImageCdn'
+  }
 }
 
 export function detectProvider (userInput: string = '') {

src/runtime/providers/netlifyImageCdn.ts

@@ -0,0 +1,52 @@
+import type { ProviderGetImage } from '../../types'
+import { createOperationsGenerator } from '#image'
+
+// https://docs.netlify.com/image-cdn/overview/
+export const operationsGenerator = createOperationsGenerator({
+  keyMap: {
+    width: 'w',
+    height: 'h',
+    format: 'fm',
+    quality: 'q',
+    position: 'position',
+    fit: 'fit'
+  },
+  valueMap: {
+    fit: {
+      fill: 'fill',
+      cover: 'cover',
+      contain: 'contain'
+    },
+    format: {
+      avif: 'avif',
+      gif: 'gif',
+      jpg: 'jpg',
+      png: 'png',
+      webp: 'webp'
+    },
+    position: {
+      top: 'top',
+      right: 'right',
+      bottom: 'bottom',
+      left: 'left',
+      center: 'center'
+    }
+  },
+  joinWith: '&',
+  formatter: (key: string, value: string) => `${key}=${value ?? ''}`
+})
+
+export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}) => {
+  const mods: Record<string, string> = { ...modifiers }
+  mods.url = src
+  if (modifiers.width) {
+    mods.width = modifiers.width.toString()
+  }
+  if (modifiers.height) {
+    mods.height = modifiers.height.toString()
+  }
+  const operations = operationsGenerator(mods)
+  return {
+    url: `${baseURL || '/.netlify/images'}?${operations}`
+  }
+}

src/runtime/providers/netlify.ts → src/runtime/providers/netlifyLargeMedia.ts

@@ -15,7 +15,7 @@ export const operationsGenerator = createOperationsGenerator({
     }
   },
   joinWith: '&',
-  formatter: (key, value) => `${key}=${value}`
+  formatter: (key: string, value: string) => `${key}=${value}`
 })
 
 const isDev = process.env.NODE_ENV === 'development'

test/providers.ts

@@ -15,7 +15,9 @@ export const images = [
     imageengine: { url: '/test.png' },
     unsplash: { url: '/test.png' },
     imagekit: { url: '/test.png' },
-    netlify: { url: '/test.png' },
+    netlify: { url: '/.netlify/images?url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png' },
     prepr: { url: 'https://projectName.stream.prepr.io/image-test-300x450-png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?auto=format' },
@@ -49,7 +51,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200' },
     unsplash: { url: '/test.png?w=200' },
     imagekit: { url: '/test.png?tr=w-200' },
-    netlify: { url: '/test.png?w=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&nf_resize=fit' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200/image-test-300x450-png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&auto=format' },
@@ -83,7 +87,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/h_200' },
     unsplash: { url: '/test.png?h=200' },
     imagekit: { url: '/test.png?tr=h-200' },
-    netlify: { url: '/test.png?h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?h=200&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?h=200&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?h=200&nf_resize=fit' },
     prepr: { url: 'https://projectName.stream.prepr.io/h_200/image-test-300x450-png' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?h=200&auto=format' },
@@ -117,7 +123,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200/h_200' },
     unsplash: { url: '/test.png?w=200&h=200' },
     imagekit: { url: '/test.png?tr=w-200,h-200' },
-    netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&h=200&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200/image-test-300x450-png' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&auto=format' },
@@ -151,7 +159,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200/h_200/m_letterbox' },
     unsplash: { url: '/test.png?w=200&h=200&fit=fill' },
     imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' },
-    netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&h=200&fit=contain&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&fit=contain&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain/image-test-300x450-png' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&fit=fill&auto=format&bg=ffffff' },
@@ -185,7 +195,9 @@ export const images = [
     imageengine: { url: '/test.png?imgeng=/w_200/h_200/m_letterbox/f_jpg' },
     unsplash: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' },
     imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' },
-    netlify: { url: '/test.png?w=200&h=200&nf_resize=fit' },
+    netlify: { url: '/.netlify/images?w=200&h=200&fit=contain&fm=jpeg&url=/test.png' },
+    netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&fit=contain&fm=jpeg&url=/test.png' },
+    netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' },
     prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' },
     sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&fit=fill&fm=jpg&bg=ffffff' },
     prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain,format_jpg/image-test-300x450-png' },