feat: add support for image helpers in nitro endpoints (#1473)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: Afshar07

knip.json

@@ -9,7 +9,8 @@
         "scripts/*"
       ],
       "ignoreUnresolved": [
-        "#app/nuxt"
+        "#app/nuxt",
+        "#internal/nuxt-image"
       ],
       "ignoreDependencies": [
         "vitest-environment-nuxt"

playground/server/api/image.ts

@@ -0,0 +1,10 @@
+export default defineEventHandler(async (event) => {
+  const image = useImage(event)
+  return image.getImage('/image.jpg', {
+    provider: 'ipx',
+    modifiers: {
+      format: 'webp',
+      quality: 75,
+    },
+  })
+})

src/module.ts

@@ -1,10 +1,10 @@
 import process from 'node:process'
 
 import { parseURL, withLeadingSlash } from 'ufo'
-import { defineNuxtModule, addTemplate, addImports, createResolver, addComponent, addPlugin } from '@nuxt/kit'
+import { defineNuxtModule, addTemplate, addImports, addServerImports, createResolver, addComponent, addPlugin, addServerTemplate } from '@nuxt/kit'
 import { resolve } from 'pathe'
 import { resolveProviders, detectProvider, resolveProvider } from './provider'
-import type { ImageProviders, ImageOptions, InputProvider, CreateImageOptions } from './types'
+import type { ImageProviders, ImageOptions, InputProvider, CreateImageOptions, ImageModuleProvider } from './types'
 
 export interface ModuleOptions extends ImageProviders {
   inject: boolean
@@ -121,15 +121,21 @@ export default defineNuxtModule<ModuleOptions>({
     addTemplate({
       filename: 'image-options.mjs',
       getContents() {
-        return `
-${providers.map(p => `import * as ${p.importName} from '${p.runtime}'`).join('\n')}
+        return generateImageOptions(providers, imageOptions)
+      },
+    })
 
-export const imageOptions = ${JSON.stringify(imageOptions, null, 2)}
+    addServerImports([
+      {
+        name: 'useImage',
+        from: resolver.resolve('runtime/server/utils/image'),
+      },
+    ])
 
-imageOptions.providers = {
-${providers.map(p => `  ['${p.name}']: { provider: ${p.importName}, defaults: ${JSON.stringify(p.runtimeOptions)} }`).join(',\n')}
-}
-        `
+    addServerTemplate({
+      filename: '#internal/nuxt-image',
+      getContents() {
+        return generateImageOptions(providers, imageOptions)
       },
     })
 
@@ -180,3 +186,16 @@ function pick<O extends Record<any, any>, K extends keyof O>(obj: O, keys: K[]):
   }
   return newobj
 }
+
+function generateImageOptions(providers: ImageModuleProvider[], imageOptions: Omit<CreateImageOptions, 'providers' | 'nuxt' | 'runtimeConfig'>): string {
+  return `
+  ${providers.map(p => `import * as ${p.importName} from '${p.runtime}'`).join('\n')}
+  
+  export const imageOptions = {
+    ...${JSON.stringify(imageOptions, null, 2)},
+    providers: {
+      ${providers.map(p => `  ['${p.name}']: { provider: ${p.importName}, defaults: ${JSON.stringify(p.runtimeOptions)} }`).join(',\n')}
+    }
+  }
+`
+}

src/runtime/components/NuxtImg.vue

@@ -33,7 +33,7 @@ import { prerenderStaticImages } from '../utils/prerender'
 import { markFeatureUsage } from '../utils/performance'
 import { imgProps, useBaseImage } from './_base'
 
-import { useHead } from '#imports'
+import { useHead, useRequestEvent } from '#imports'
 import { useNuxtApp } from '#app/nuxt'
 
 const props = defineProps(imgProps)
@@ -142,7 +142,7 @@ if (import.meta.server && props.preload) {
 
 // Prerender static images
 if (import.meta.server && import.meta.prerender) {
-  prerenderStaticImages(src.value, sizes.value.srcset)
+  prerenderStaticImages(src.value, sizes.value.srcset, useRequestEvent())
 }
 
 const nuxtApp = useNuxtApp()

src/runtime/components/NuxtPicture.vue

@@ -34,7 +34,7 @@ import { getFileExtension } from '../utils'
 import { useImage } from '../composables'
 import { useBaseImage, pictureProps, baseImageProps } from './_base'
 
-import { useHead } from '#imports'
+import { useHead, useRequestEvent } from '#imports'
 import { useNuxtApp } from '#app/nuxt'
 
 const props = defineProps(pictureProps)
@@ -135,7 +135,7 @@ const imgEl = ref<HTMLImageElement>()
 // Prerender static images
 if (import.meta.server && import.meta.prerender) {
   for (const src of sources.value) {
-    prerenderStaticImages(src.src, src.srcset)
+    prerenderStaticImages(src.src, src.srcset, useRequestEvent())
   }
 }
 

src/runtime/composables.ts

@@ -1,15 +1,17 @@
+import type { H3Event } from 'h3'
 import type { $Img } from '../module'
 
 import { createImage } from './image'
 import { imageOptions } from '#build/image-options.mjs'
 import { useNuxtApp, useRuntimeConfig } from '#imports'
 
-export const useImage = (): $Img => {
+export const useImage = (event?: H3Event): $Img => {
   const config = useRuntimeConfig()
   const nuxtApp = useNuxtApp()
 
   return nuxtApp.$img as $Img || nuxtApp._img || (nuxtApp._img = createImage({
     ...imageOptions,
+    event: event || nuxtApp.ssrContext?.event,
     nuxt: {
       baseURL: config.app.baseURL,
     },

src/runtime/image.ts

@@ -14,8 +14,8 @@ export function createImage(globalOptions: CreateImageOptions) {
     const image = resolveImage(ctx, input, options)
 
     // Prerender static images
-    if (import.meta.server && import.meta.prerender) {
-      prerenderStaticImages(image.url)
+    if (import.meta.server && import.meta.prerender && globalOptions.event) {
+      prerenderStaticImages(image.url, undefined, globalOptions.event)
     }
 
     return image

src/runtime/server/utils/image.ts

@@ -0,0 +1,21 @@
+import type { H3Event } from 'h3'
+
+import type { Img } from '../../../module'
+import { createImage } from '../../image'
+
+// @ts-expect-error virtual file
+import { imageOptions } from '#internal/nuxt-image'
+import { useRuntimeConfig } from '#imports'
+
+export const useImage = (event?: H3Event): Img => {
+  const config = useRuntimeConfig()
+
+  return createImage({
+    ...imageOptions,
+    nuxt: {
+      baseURL: config.app.baseURL,
+    },
+    event,
+    runtimeConfig: config,
+  })
+}

src/runtime/utils/prerender.ts

@@ -1,8 +1,8 @@
+import type { H3Event } from 'h3'
 import { appendHeader } from 'h3'
-import { useRequestEvent } from '#imports'
 
-export function prerenderStaticImages(src = '', srcset = '') {
-  if (!import.meta.server || !import.meta.prerender) {
+export function prerenderStaticImages(src = '', srcset = '', event?: H3Event) {
+  if (!import.meta.server || !import.meta.prerender || !event) {
     return
   }
 
@@ -15,5 +15,5 @@ export function prerenderStaticImages(src = '', srcset = '') {
     return
   }
 
-  appendHeader(useRequestEvent()!, 'x-nitro-prerender', paths.map(p => encodeURIComponent(p)).join(', '))
+  appendHeader(event, 'x-nitro-prerender', paths.map(p => encodeURIComponent(p)).join(', '))
 }

src/types/image.ts

@@ -1,4 +1,5 @@
 import type { RuntimeConfig } from '@nuxt/schema'
+import type { H3Event } from 'h3'
 
 export interface ImageModifiers {
   width: number
@@ -39,6 +40,7 @@ export interface CreateImageOptions {
   nuxt: {
     baseURL: string
   }
+  event?: H3Event
   presets: { [name: string]: ImageOptions }
   provider: string
   screens: Record<string, number>

test/e2e/ssr.test.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 
 import { describe, it, expect } from 'vitest'
-import { setup, createPage, url, fetch } from '@nuxt/test-utils'
+import { $fetch, setup, createPage, url, fetch } from '@nuxt/test-utils'
 
 import { providers } from '../../playground/providers'
 
@@ -69,4 +69,13 @@ describe('browser (ssr: true)', () => {
     const res = await fetch(url('/_ipx/s_300x300/images/colors.jpg'))
     expect(res.headers.get('content-type')).toBe('image/jpeg')
   })
+
+  it('works with server-side useImage', async () => {
+    expect(await $fetch('/api/image')).toMatchInlineSnapshot(`
+      {
+        "format": "webp",
+        "url": "/_ipx/f_webp&q_75/image.jpg",
+      }
+    `)
+  })
 })