feat: support prerendering static images (nuxt#614)

procrates · Nov 24, 2022 · bedf8cb · bedf8cb
1 parent f4bf8a5
commit bedf8cb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/ipx.ts b/src/ipx.ts
@@ -33,6 +33,7 @@ export const ipxSetup: ProviderSetup = async (_providerOptions, moduleOptions) =
       route: '/_ipx/**',
       handler: resolver.resolve('./runtime/ipx')
     })
+    return
   }
 
   // Add as dev handler for development

diff --git a/src/runtime/components/nuxt-img.ts b/src/runtime/components/nuxt-img.ts
@@ -1,8 +1,9 @@
 import { h, defineComponent, ref, computed, onMounted } from 'vue'
+import { appendHeader } from 'h3'
 import { useImage } from '../composables'
 import { parseSize } from '../utils'
 import { baseImageProps, useBaseImage } from './_base'
-import { useHead } from '#imports'
+import { useHead, useRequestEvent } from '#imports'
 
 export const imgProps = {
   ...baseImageProps,
@@ -85,6 +86,14 @@ export default defineComponent({
       })
     }
 
+    if (process.env.prerender) {
+      const sources = [
+        src.value,
+        ...(sizes.value.srcset || '').split(',').map(s => s.split(' ')[0])
+      ].filter(s => s && s.includes('/_ipx/'))
+      appendHeader(useRequestEvent(), 'X-Nitro-Prerender', sources.join(','))
+    }
+
     const imgEl = ref<HTMLImageElement>(null)
 
     onMounted(() => {

diff --git a/src/runtime/ipx.ts b/src/runtime/ipx.ts
@@ -8,7 +8,8 @@ export default lazyEventHandler(() => {
   const ipxOptions = {
     ...(useRuntimeConfig().ipx || {}),
     // TODO: Switch to storage API when ipx supports it
-    dir: fileURLToPath(new URL('../public', import.meta.url))
+    // TODO: Using relative paths for POC only
+    dir: fileURLToPath(new URL(process.env.prerender ? '../../.output/public' : '../public', import.meta.url))
   }
 
   const ipx = createIPX(ipxOptions)