fix: support virtual images when prerendering

Relates to #287
nuxt-modules · Dec 13, 2024 · 057aa9b · 057aa9b
1 parent cdfc3fb
commit 057aa9b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 5 deletions.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -62,6 +62,7 @@ export default defineNuxtConfig({
         '/search?foo=2',
         '/satori/image',
         '/prebuilt',
+        '/virtual-image',
       ],
       ignore: [
         '/not-prerendered',

diff --git a/playground/pages/virtual-image.vue b/playground/pages/virtual-image.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { defineOgImageComponent, definePageMeta, useServerSeoMeta } from '#imports'
+
+definePageMeta({
+  title: 'Home',
+  description: 'This is the home page',
+  breadcrumbTitle: 'Home',
+})
+
+useServerSeoMeta({
+  title: 'Welcome to the playground',
+  ogTitle: 'Welcome to the playground',
+})
+
+defineOgImageComponent('NuxtSeo', {
+  theme: '#fcfcfc',
+  colorMode: 'dark',
+  siteLogo: '/my-img.png',
+})
+</script>
+
+<template>
+  <div class="px-7 my-5">
+    <div>
+      <ul>
+        <li>
+          <NuxtLink href="/chromium/screenshot">
+            Chromium screenshot
+          </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink href="/chromium/component">
+            Chromium component
+          </NuxtLink>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <NuxtLink href="/satori/">
+            Satori index
+          </NuxtLink>
+        </li>
+        <li>
+          <a target="_blank" href="/__og-image__/image/satori/og.png">Satori png</a>
+        </li>
+        <li>
+          <NuxtLink to="/satori/image">
+            Satori image
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/playground/server/routes/my-img.png.ts b/playground/server/routes/my-img.png.ts
@@ -0,0 +1,7 @@
+import { defineEventHandler, setHeader } from 'h3'
+
+export default defineEventHandler((e) => {
+  // return a simple png
+  setHeader(e, 'Content-Type', 'image/png')
+  return Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', 'base64')
+})
diff --git a/src/runtime/server/og-image/satori/plugins/imageSrc.ts b/src/runtime/server/og-image/satori/plugins/imageSrc.ts
@@ -38,13 +38,18 @@ export default defineSatoriTransformer([
           // because we can't fetch public files using $fetch when prerendering
           imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase)
         }
-        else {
+        if (!imageBuffer) {
           // see if we can fetch it from a kv host if we're using an edge provider
-          imageBuffer = (await e.$fetch(src, {
-            baseURL: useNitroOrigin(e),
-            responseType: 'arrayBuffer',
-          })
+          imageBuffer = (await e.$fetch(src, { responseType: 'arrayBuffer' })
             .catch(() => {})) as BufferSource | undefined
+          if (!imageBuffer && !import.meta.prerender) {
+            // see if we can fetch it from a kv host if we're using an edge provider
+            imageBuffer = (await e.$fetch(src, {
+              baseURL: useNitroOrigin(e),
+              responseType: 'arrayBuffer',
+            })
+              .catch(() => {})) as BufferSource | undefined
+          }
         }
         // convert relative images to base64 as satori will have no chance of resolving
         if (imageBuffer)