fix: app.baseURL prerendering image resolving

Fixes #292

Author: harlan-zw

src/runtime/server/og-image/context.ts

@@ -7,14 +7,15 @@ import type {
 } from '../../types'
 import type ChromiumRenderer from './chromium/renderer'
 import type SatoriRenderer from './satori/renderer'
-import { useNitroApp } from 'nitropack/runtime'
 import { htmlPayloadCache, prerenderOptionsCache } from '#og-image-cache'
 import { theme } from '#og-image-virtual/unocss-config.mjs'
+import { createSitePathResolver } from '#site-config/server/composables/utils'
 import { createGenerator } from '@unocss/core'
 import presetWind from '@unocss/preset-wind'
 import { defu } from 'defu'
 import { parse } from 'devalue'
 import { createError, getQuery } from 'h3'
+import { useNitroApp } from 'nitropack/runtime'
 import { hash } from 'ohash'
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from 'ufo'
 import { normalizeKey } from 'unstorage'
@@ -24,7 +25,6 @@ import { createNitroRouteRuleMatcher } from '../util/kit'
 import { logger } from '../util/logger'
 import { normaliseOptions } from '../util/options'
 import { useChromiumRenderer, useSatoriRenderer } from './instances'
-import { createSitePathResolver } from '#site-config/server/composables/utils'
 
 export function resolvePathCacheKey(e: H3Event, path?: string) {
   const siteConfig = e.context.siteConfig.get()
@@ -130,6 +130,7 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
     key,
     renderer,
     isDebugJsonPayload,
+    runtimeConfig,
     publicStoragePath: runtimeConfig.publicStoragePath,
     extension,
     basePath,
@@ -245,7 +246,8 @@ async function fetchPathHtmlAndExtractOptions(e: H3Event, path: string, key: str
   const err = handleNon200Response(htmlRes, path)
   if (err) {
     logger.warn(err)
-  } else {
+  }
+  else {
     html = htmlRes._data || await htmlRes.text()
     _payload = getPayloadFromHtml(html)
   }

src/runtime/server/og-image/satori/plugins/imageSrc.ts

@@ -20,7 +20,7 @@ export default defineSatoriTransformer([
   // fix <img src="">
   {
     filter: (node: VNode) => node.type === 'img' && node.props?.src,
-    transform: async (node: VNode, { e, publicStoragePath }: OgImageRenderEventContext) => {
+    transform: async (node: VNode, { e, publicStoragePath, runtimeConfig }: OgImageRenderEventContext) => {
       const src = node.props.src!
       const isRelative = src.startsWith('/')
       let dimensions
@@ -32,10 +32,11 @@ export default defineSatoriTransformer([
 
       if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
+          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, '')
           // try hydrating from storage
           // we need to read the file using unstorage
           // because we can't fetch public files using $fetch when prerendering
-          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src)
+          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase)
         }
         else {
           // see if we can fetch it from a kv host if we're using an edge provider
@@ -96,14 +97,15 @@ export default defineSatoriTransformer([
   // fix style="background-image: url('')"
   {
     filter: (node: VNode) => node.props?.style?.backgroundImage?.includes('url('),
-    transform: async (node: VNode, { e, publicStoragePath }: OgImageRenderEventContext) => {
+    transform: async (node: VNode, { e, publicStoragePath, runtimeConfig }: OgImageRenderEventContext) => {
       // same as the above, need to swap out relative background images for absolute
       const backgroundImage = node.props.style!.backgroundImage!
       const src = backgroundImage.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
       const isRelative = src?.startsWith('/')
       if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
-          const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src)
+          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, '/')
+          const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase)
           if (imageBuffer) {
             const base64 = toBase64Image(Buffer.from(imageBuffer as ArrayBuffer))
             node.props.style!.backgroundImage = `url(${base64})`

src/runtime/server/plugins/prerender.ts

@@ -1,5 +1,6 @@
 import { defineNitroPlugin } from '#imports'
 import { prerenderOptionsCache } from '#og-image-cache'
+import { createSitePathResolver } from '#site-config/server/composables/utils'
 import { parseURL } from 'ufo'
 import { isInternalRoute } from '../../pure'
 import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from '../og-image/context'
@@ -26,7 +27,11 @@ export default defineNitroPlugin(async (nitro) => {
     ].join('\n'))
     if (!options)
       return
-    const key = resolvePathCacheKey(ctx.event)
+    const resolvePathWithBase = createSitePathResolver(ctx.event, {
+      absolute: false,
+      withBase: true,
+    })
+    const key = resolvePathCacheKey(ctx.event, resolvePathWithBase(path))
     await prerenderOptionsCache!.setItem(key, options)
     // if we're prerendering then we don't need these options in the final HTML
     const index = html.bodyAppend.findIndex(script => script.includes('id="nuxt-og-image-options"'))

src/runtime/shared.ts

@@ -43,5 +43,11 @@ export function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptio
 }
 
 export function useOgImageRuntimeConfig() {
-  return useRuntimeConfig()['nuxt-og-image'] as any as OgImageRuntimeConfig
+  const c = useRuntimeConfig()
+  return {
+    ...(c['nuxt-og-image'] as Record<string, any>),
+    app: {
+      baseURL: c.app.baseURL,
+    },
+  } as any as OgImageRuntimeConfig
 }

src/runtime/types.ts

@@ -19,6 +19,7 @@ export interface OgImageRenderEventContext {
   options: OgImageOptions
   isDebugJsonPayload: boolean
   publicStoragePath: string
+  runtimeConfig: OgImageRuntimeConfig
   _nitro: NitroApp
 }
 
@@ -43,6 +44,10 @@ export interface OgImageRuntimeConfig {
   isNuxtContentDocumentDriven: boolean
   strictNuxtContentPaths: boolean
   zeroRuntime: boolean
+
+  app: {
+    baseURL: string
+  }
 }
 
 export interface OgImageComponent {

test/integration/__image_snapshots__/base-test-ts-build-dynamic-images-1-snap.png

@@ -0,0 +1,68 @@
+import { createResolver } from '@nuxt/kit'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+import { toMatchImageSnapshot } from 'jest-image-snapshot'
+import { describe, expect, it } from 'vitest'
+
+const { resolve } = createResolver(import.meta.url)
+
+await setup({
+  rootDir: resolve('../fixtures/basic'),
+  server: true,
+  build: true,
+  nuxtConfig: {
+    app: {
+      baseURL: '/prefix/',
+    },
+  },
+})
+
+expect.extend({ toMatchImageSnapshot })
+
+describe('build', () => {
+  it.runIf(process.env.HAS_CHROME)('chromium tests', async () => {
+    const chromium: ArrayBuffer = await $fetch('/prefix/__og-image__/image/chromium/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(chromium)).toMatchImageSnapshot()
+  })
+  it('static images', async () => {
+    const customFont: ArrayBuffer = await $fetch('/prefix/__og-image__/static/satori/custom-font/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(customFont)).toMatchImageSnapshot()
+
+    const image: ArrayBuffer = await $fetch('/prefix/__og-image__/static/satori/image/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(image)).toMatchImageSnapshot()
+
+    const defaults: ArrayBuffer = await $fetch('/prefix/__og-image__/static/satori/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(defaults)).toMatchImageSnapshot()
+  }, 60000)
+
+  it('dynamic images', async () => {
+    const inlineRouteRules: ArrayBuffer = await $fetch('/prefix/__og-image__/image/satori/route-rules/inline/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(inlineRouteRules)).toMatchImageSnapshot()
+
+    const overrideRouteRules: ArrayBuffer = await $fetch('/prefix/__og-image__/image/satori/route-rules/config/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(overrideRouteRules)).toMatchImageSnapshot()
+
+    const globalRouteRules: ArrayBuffer = await $fetch('/prefix/__og-image__/image/satori/route-rules/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(globalRouteRules)).toMatchImageSnapshot()
+  })
+})