fix: broken public image resolving

Maybe fixes #297

Author: harlan-zw

playground/components/OgImage/WithImage.vue

@@ -24,6 +24,8 @@ const containerStyles = {
     <div :style="{ position: 'absolute', top: '170px', left: '250px', fontSize: '25px', display: 'flex', alignItems: 'center' }">
       <img src="/harlan-wilton.jpeg" width="100" height="100" :style="{ borderRadius: '12px', marginRight: '8px' }">
     </div>
+    <img src="harlan-wilton.jpeg" width="100" height="100" :style="{ borderRadius: '12px', marginRight: '8px' }">
+    <img src="assets/static/images/picture.jpg" width="100" height="100" :style="{ borderRadius: '12px', marginRight: '8px' }">
     <img src="https://avatars.githubusercontent.com/u/5326365?v=4" width="200" height="200" alt="absolute test">
   </div>
 </template>

playground/public/assets/static/images/picture.jpg

@@ -0,0 +1 @@
+export default {}

playground/tailwind.config.ts

@@ -12,16 +12,16 @@ function detectBase64MimeType(data: string) {
   }
 
   for (const s in signatures) {
-    if (data.indexOf(s) === 0)
+    if (data.startsWith(s)) {
       return signatures[s as keyof typeof signatures]
+    }
   }
   return 'image/svg+xml'
 }
 
 export function toBase64Image(data: string | ArrayBuffer) {
   const base64 = typeof data === 'string' ? data : Buffer.from(data).toString('base64')
   const type = detectBase64MimeType(base64)
-
   return `data:${type};base64,${base64}`
 }
 

src/runtime/pure.ts

@@ -1,7 +1,7 @@
 import type { OgImageRenderEventContext, VNode } from '../../../../types'
 import { useNitroOrigin, useStorage } from '#imports'
 import sizeOf from 'image-size'
-import { withBase } from 'ufo'
+import { withBase, withoutLeadingSlash } from 'ufo'
 import { toBase64Image } from '../../../../pure'
 import { logger } from '../../../util/logger'
 import { defineSatoriTransformer } from '../utils'
@@ -10,7 +10,12 @@ async function resolveLocalFilePathImage(publicStoragePath: string, src: string)
   // try hydrating from storage
   // we need to read the file using unstorage
   // because we can't fetch public files using $fetch when prerendering
-  const key = `${publicStoragePath}${src.replace('./', ':').replace('/', ':')}`
+  const normalizedSrc = withoutLeadingSlash(src
+    .replace('_nuxt/@fs/', '')
+    .replace('_nuxt/', '')
+    .replace('./', ''),
+  )
+  const key = `${publicStoragePath}:${normalizedSrc}`
   if (await useStorage().hasItem(key))
     return await useStorage().getItemRaw(key)
 }

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

@@ -3,6 +3,7 @@ import type { OgImageRenderEventContext, Renderer, ResolvedFontConfig } from '..
 import { fontCache } from '#og-image-cache'
 import { theme } from '#og-image-virtual/unocss-config.mjs'
 import { defu } from 'defu'
+import { sendError } from 'h3'
 import { normaliseFontInput, useOgImageRuntimeConfig } from '../../../shared'
 import { loadFont } from './font'
 import { useResvg, useSatori, useSharp } from './instances'
@@ -58,7 +59,9 @@ export async function createSvg(event: OgImageRenderEventContext) {
     width: options.width!,
     height: options.height!,
   }) as SatoriOptions
-  return satori(vnodes, satoriOptions)
+  return satori(vnodes, satoriOptions).catch((err) => {
+    return sendError(event.e, err, import.meta.dev)
+  })
 }
 
 async function createPng(event: OgImageRenderEventContext) {
@@ -93,9 +96,13 @@ const SatoriRenderer: Renderer = {
     }
   },
   async debug(e) {
+    const [vnodes, svg] = await Promise.all([
+      createVNodes(e),
+      createSvg(e),
+    ])
     return {
-      vnodes: await createVNodes(e),
-      svg: await createSvg(e),
+      vnodes,
+      svg,
     }
   },
 }