nuxt-og-image 2.0.0-beta.3 → 2.0.0-beta.31

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -1,19 +1,21 @@
-import { createError, defineEventHandler, setHeader } from "h3";
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { Buffer } from "node:buffer";
+import { createError, defineEventHandler, sendRedirect, setHeader } from "h3";
+import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { prefixStorage } from "unstorage";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig, useStorage } from "#imports";
 export default defineEventHandler(async (e) => {
+  const { runtimeBrowser, runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/og.png"))
     return;
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  setHeader(e, "Content-Type", "image/png");
-  setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
-  setHeader(e, "Pragma", "no-cache");
-  setHeader(e, "Expires", "0");
   const options = await fetchOptions(e, basePath);
+  if (process.env.NODE_ENV === "production" && !process.env.prerender && !runtimeBrowser && options.provider === "browser")
+    return sendRedirect(e, joinURL(useHostname(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
   const provider = await useProvider(options.provider);
   if (!provider) {
     throw createError({
@@ -21,5 +23,46 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createPng(withBase(basePath, useHostname(e)), options);
+  const cache = prefixStorage(useStorage(), "og-image-cache:images");
+  const key = options.cacheKey || e.node.req.url;
+  let png;
+  if (runtimeCacheStorage && await cache.hasItem(key)) {
+    const { value, expiresAt } = await cache.getItem(key);
+    if (expiresAt > Date.now()) {
+      setHeader(e, "Cache-Control", "public, max-age=31536000");
+      setHeader(e, "Content-Type", "image/png");
+      png = Buffer.from(value, "base64");
+    } else {
+      await cache.removeItem(key);
+    }
+  }
+  if (!png) {
+    try {
+      png = await provider.createPng(withBase(basePath, useHostname(e)), options);
+      if (png && runtimeCacheStorage && options.static) {
+        const base64png = Buffer.from(png).toString("base64");
+        await cache.setItem(key, { value: base64png, expiresAt: Date.now() + (options.cacheTtl || 0) });
+      }
+    } catch (err) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: `Failed to create og image: ${err.message}`
+      });
+    }
+  }
+  if (png) {
+    if (!process.dev && options.static) {
+      setHeader(e, "Cache-Control", "public, max-age=31536000");
+    } else {
+      setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+      setHeader(e, "Pragma", "no-cache");
+      setHeader(e, "Expires", "0");
+    }
+    setHeader(e, "Content-Type", "image/png");
+    return png;
+  }
+  throw createError({
+    statusCode: 500,
+    statusMessage: "Failed to create og image, unknown error."
+  });
 });

package/dist/runtime/nitro/middleware/playground.mjs

@@ -1,11 +1,12 @@
 import { defineEventHandler } from "h3";
-import { parseURL, withoutTrailingSlash } from "ufo";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
 import { fetchOptions } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const path = withoutTrailingSlash(parseURL(e.path).pathname);
   if (!path.endsWith("/__og_image__"))
     return;
-  const basePath = path.replace("/__og_image__", "");
+  const basePath = withBase(path.replace("/__og_image__", ""), useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, basePath === "" ? "/" : basePath);
   if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
@@ -22,5 +23,5 @@ export default defineEventHandler(async (e) => {
   }
 </style>
 <title>OG Image Playground</title>
-<iframe src="/__nuxt_og_image__/client/?&path=${basePath}"></iframe>`;
+<iframe src="/__nuxt_og_image__/client?&path=${basePath}&base=${useRuntimeConfig().app.baseURL}"></iframe>`;
 });

package/dist/runtime/nitro/plugins/prerender.d.ts

@@ -0,0 +1,3 @@
+import type { NitroAppPlugin } from 'nitropack';
+declare const OgImagePrenderNitroPlugin: NitroAppPlugin;
+export default OgImagePrenderNitroPlugin;

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -0,0 +1,26 @@
+import { appendHeader } from "h3";
+import { joinURL } from "ufo";
+import { prefixStorage } from "unstorage";
+import { extractOgImageOptions } from "../utils-pure.mjs";
+import { useStorage } from "#imports";
+const OgImagePrenderNitroPlugin = (nitroApp) => {
+  if (!process.env.prerender)
+    return;
+  const cache = prefixStorage(useStorage(), "og-image-cache:options");
+  nitroApp.hooks.hook("render:html", async (ctx, { event }) => {
+    const url = event.node.req.url;
+    if (url.includes(".") || url.startsWith("/__nuxt_island/"))
+      return;
+    const options = extractOgImageOptions(ctx.head.join("\n"));
+    if (!options)
+      return;
+    await cache.setItem(url, {
+      value: JSON.stringify(options),
+      expiresAt: Date.now() + 60 * 60 * 1e3
+      // 60 minutes to prerender
+    });
+    if (options.static && options.provider === "satori")
+      appendHeader(event, "x-nitro-prerender", joinURL(url, "/__og_image__/og.png"));
+  });
+};
+export default OgImagePrenderNitroPlugin;

package/dist/runtime/nitro/providers/browser/lambda.d.ts

@@ -1 +1 @@
-export default function createBrowser(): Promise<import("puppeteer-core").Browser>;
+export default function createBrowser(): Promise<import("playwright-core").Browser>;

package/dist/runtime/nitro/providers/browser/lambda.mjs

@@ -1,9 +1,9 @@
-import edgeChromium from "chrome-aws-lambda";
-import puppeteer from "puppeteer-core";
+import awsChromium from "chrome-aws-lambda";
+import { chromium } from "playwright-core";
 export default async function createBrowser() {
-  return puppeteer.launch({
-    args: edgeChromium.args,
-    executablePath: await edgeChromium.executablePath,
+  return await chromium.launch({
+    args: awsChromium.args,
+    executablePath: await awsChromium.executablePath,
     headless: true
   });
 }

package/dist/runtime/nitro/providers/browser/{node.mjs → playwright.mjs}

@@ -1,14 +1,5 @@
 import playwrightCore from "playwright-core";
 export default async function createBrowser() {
-  try {
-    const { Launcher } = await import(String("chrome-launcher"));
-    const chromePath = Launcher.getFirstInstallation();
-    return await playwrightCore.chromium.launch({
-      headless: true,
-      executablePath: chromePath
-    });
-  } catch (e) {
-  }
   try {
     return await playwrightCore.chromium.launch({
       headless: true

package/dist/runtime/nitro/providers/browser/universal.d.ts

@@ -0,0 +1 @@
+export default function createBrowser(): Promise<any>;

package/dist/runtime/nitro/providers/browser/universal.mjs

@@ -0,0 +1,33 @@
+import playwrightCore from "playwright-core";
+export default async function createBrowser() {
+  if (process.dev || process.env.prerender) {
+    try {
+      const { Launcher } = await import(String("chrome-launcher"));
+      const chromePath = Launcher.getFirstInstallation();
+      return await playwrightCore.chromium.launch({
+        headless: true,
+        executablePath: chromePath
+      });
+    } catch (e) {
+    }
+  }
+  try {
+    return await playwrightCore.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+  }
+  try {
+    const playwright = await import(String("playwright"));
+    return await playwright.chromium.launch({
+      headless: true
+    });
+  } catch (e) {
+    if (process.dev) {
+      console.warn("Failed to load chromium instance. Ensure you have chrome installed, otherwise add the dependency: `npm add -D playwright`.");
+    } else {
+      console.error("Failed to load browser instance. Please open an issue with the exception: https://github.com/harlan-zw/nuxt-og-image/issues.");
+      throw e;
+    }
+  }
+}

package/dist/runtime/nitro/providers/png/resvg.d.ts

@@ -0,0 +1,4 @@
+import type { ResvgRenderOptions } from '@resvg/resvg-wasm';
+export default function (svg: string, options: ResvgRenderOptions & {
+    baseUrl: string;
+}): Promise<Uint8Array>;

package/dist/runtime/nitro/providers/png/resvg.mjs

@@ -0,0 +1,11 @@
+import { Resvg, initWasm } from "@resvg/resvg-wasm";
+import { wasmLoader } from "../../utils.mjs";
+const ReSvgLoader = wasmLoader("/* NUXT_OG_IMAGE_RESVG_WASM */", "/resvg.wasm");
+export default async function(svg, options) {
+  const ReSvgWasm = await ReSvgLoader.load({ baseUrl: options.baseUrl });
+  await initWasm(ReSvgWasm).catch(() => {
+  });
+  const resvgJS = new Resvg(svg, {});
+  const pngData = resvgJS.render();
+  return pngData.asPng();
+}

package/dist/runtime/nitro/providers/png/svg2png.mjs

@@ -0,0 +1,11 @@
+import { initialize, svg2png } from "svg2png-wasm";
+import { wasmLoader } from "../../utils.mjs";
+const Svg2PngLoader = wasmLoader("/* NUXT_OG_IMAGE_SVG2PNG_WASM */", "/svg2png.wasm");
+export default async function(svg, options) {
+  const Svg2PngWasm = await Svg2PngLoader.load({ baseUrl: options.baseUrl });
+  await initialize(Svg2PngWasm).catch((e) => {
+    if (!e.message.trim().endsWith("function can be used only once."))
+      throw e;
+  });
+  return await svg2png(svg, options);
+}

package/dist/runtime/nitro/providers/satori/{webworker.mjs → yoga-wasm.mjs}

@@ -1,11 +1,10 @@
 import satori, { init } from "satori/wasm";
 import initYoga from "yoga-wasm-web";
 import { wasmLoader } from "../../utils.mjs";
+const YogaLoader = wasmLoader("/* NUXT_OG_IMAGE_YOGA_WASM */", "/yoga.wasm");
 export default async function(nodes, options) {
-  const loader = wasmLoader("/* NUXT_OG_IMAGE_YOGA_WASM */", "/yoga.wasm", options.baseUrl);
-  if (!await loader.loaded()) {
-    const yoga = await initYoga(await loader.load());
-    init(yoga);
-  }
+  const yogaWasm = await YogaLoader.load({ baseUrl: options.baseUrl });
+  const yoga = await initYoga(yogaWasm);
+  init(yoga);
   return await satori(nodes, options);
 }

package/dist/runtime/nitro/renderers/browser.mjs

@@ -1,5 +1,7 @@
+import { withBase } from "ufo";
 import { screenshot } from "../../browserUtil.mjs";
-import loadBrowser from "#nuxt-og-image/browser";
+import loadBrowserLauncherChunk from "#nuxt-og-image/browser";
+import { useRuntimeConfig } from "#imports";
 export default {
   name: "browser",
   createSvg: async function createSvg() {
@@ -10,19 +12,23 @@ export default {
   },
   createPng: async function createPng(basePath, options) {
     const url = new URL(basePath);
-    const createBrowser = await loadBrowser();
-    const browser = await createBrowser();
+    const launchBrowser = await loadBrowserLauncherChunk();
+    if (!launchBrowser) {
+      throw new Error("Failed to load browser. Is the `browserProvider` enabled?");
+    }
+    const browser = await launchBrowser();
+    let res = null;
     if (browser) {
       try {
-        return await screenshot(browser, {
+        res = await screenshot(browser, {
           ...options,
-          host: url.origin,
+          host: withBase(useRuntimeConfig().app.baseURL, url.origin),
           path: `/api/og-image-html?path=${url.pathname}`
         });
       } finally {
         browser.close();
       }
     }
-    return null;
+    return res;
   }
 };

package/dist/runtime/nitro/renderers/satori/index.mjs

@@ -7,9 +7,10 @@ import twClasses from "./plugins/twClasses.mjs";
 import flex from "./plugins/flex.mjs";
 import emojis from "./plugins/emojis.mjs";
 import encoding from "./plugins/encoding.mjs";
-import loadSvg2png from "#nuxt-og-image/svg2png";
+import loadPngCreator from "#nuxt-og-image/png";
 import loadSatori from "#nuxt-og-image/satori";
-import { useRuntimeConfig } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
+import { useNitroApp } from "#internal/nitro";
 const satoriFonts = [];
 let fontLoadPromise = null;
 function loadFonts(fonts) {
@@ -21,20 +22,22 @@ export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
     const svg = await this.createSvg(baseUrl, options);
-    const svg2png = await loadSvg2png();
-    return svg2png(svg, { baseUrl, ...options });
+    const pngCreator = await loadPngCreator();
+    return pngCreator(svg, { baseUrl, ...options });
   },
   createVNode: async function createVNode(baseUrl, options) {
     const url = parseURL(baseUrl);
-    const html = await globalThis.$fetch("/api/og-image-html", {
-      query: { path: url.pathname, options: JSON.stringify(options) }
-    });
-    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
-    const emojiedFont = twemoji.parse(body, {
-      folder: "svg",
-      ext: ".svg"
-    });
-    const satoriTree = convertHtmlToSatori(emojiedFont);
+    const nitroApp = useNitroApp();
+    const html = await (await nitroApp.localFetch(`/api/og-image-html?path=${url.pathname}&options=${encodeURI(JSON.stringify(options))}`)).text();
+    let body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || "";
+    try {
+      body = twemoji.parse(body, {
+        folder: "svg",
+        ext: ".svg"
+      });
+    } catch (e) {
+    }
+    const satoriTree = convertHtmlToSatori(body);
     await walkSatoriTree(url, satoriTree, [
       // @todo add user land support
       emojis(url),

package/dist/runtime/nitro/renderers/satori/plugins/encoding.mjs

@@ -1,9 +1,10 @@
 import { defineSatoriTransformer } from "../utils.mjs";
+import { decodeHtml } from "../../../utils-pure.mjs";
 export default defineSatoriTransformer(() => {
   return {
     filter: (node) => typeof node.props?.children === "string",
     transform: async (node) => {
-      node.props.children = node.props.children.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/");
+      node.props.children = decodeHtml(node.props.children);
     }
   };
 });

package/dist/runtime/nitro/renderers/satori/plugins/imageSrc.mjs

@@ -1,17 +1,41 @@
 import { withBase } from "ufo";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { readPublicAssetBase64 } from "../../../utils.mjs";
+import { useNitroApp } from "#internal/nitro";
 export default defineSatoriTransformer((url) => {
   return {
     filter: (node) => node.type === "img",
     transform: async (node) => {
       const src = node.props?.src;
       if (src && src.startsWith("/")) {
+        let updated = false;
         const file = await readPublicAssetBase64(src);
-        if (file)
+        if (file) {
           node.props.src = file;
-        else
-          node.props.src = withBase(src, `${url.protocol}//${url.host}`);
+          updated = true;
+        }
+        if (!updated) {
+          try {
+            const response = await globalThis.$fetch(src);
+            node.props.src = response.arrayBuffer();
+            updated = true;
+          } catch (e) {
+          }
+        }
+        if (!updated) {
+          const nitroApp = useNitroApp();
+          try {
+            const response = await nitroApp.localFetch(src);
+            if (response.status === 200) {
+              node.props.src = response.arrayBuffer();
+              updated = true;
+            }
+          } catch (e) {
+          }
+        }
+        if (!updated) {
+          node.props.src = `${withBase(src, `${url.protocol}//${url.host}`)}?${Date.now()}`;
+        }
       }
     }
   };

package/dist/runtime/nitro/renderers/satori/utils.d.ts

@@ -1,5 +1,5 @@
 import type { ParsedURL } from 'ufo';
-import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function loadFont(font: string): Promise<any>;
+import type { FontConfig, SatoriTransformer, VNode } from '../../../../types';
+export declare function loadFont(font: FontConfig): Promise<any>;
 export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void>;
 export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer;

package/dist/runtime/nitro/renderers/satori/utils.mjs

@@ -1,20 +1,28 @@
+import { Buffer } from "node:buffer";
 import { base64ToArrayBuffer, readPublicAsset } from "../../utils.mjs";
 import { useStorage } from "#internal/nitro";
 const cachedFonts = {};
 export async function loadFont(font) {
-  if (cachedFonts[font])
-    return cachedFonts[font];
+  let fontKey = font;
+  if (typeof font === "object")
+    fontKey = `${font.name}:${font.weight}`;
+  if (cachedFonts[fontKey])
+    return cachedFonts[fontKey];
+  const [name, weight] = fontKey.split(":");
   let data;
-  const storageKey = `assets:nuxt-og-imagee:font:${font}`;
-  if (await useStorage().hasItem(storageKey)) {
+  const storageKey = `assets:nuxt-og-imagee:font:${fontKey}`;
+  if (await useStorage().hasItem(storageKey))
     data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
-    return cachedFonts[font] = { name: font, data, style: "normal" };
+  if (!data && name === "Inter" && ["400", "700"].includes(weight)) {
+    data = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
   }
-  const [name, weight] = font.split(":");
-  if (name === "Inter" && ["400", "700"].includes(weight)) {
-    const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
-    if (data2)
-      return cachedFonts[font] = { name, weight: Number(weight), data: data2, style: "normal" };
+  if (typeof font === "object") {
+    data = await readPublicAsset(font.path);
+    if (!data) {
+      data = await globalThis.$fetch(font.path, {
+        responseType: "arrayBuffer"
+      });
+    }
   }
   if (!data) {
     const fontUrl = await globalThis.$fetch("/api/og-image-font", {
@@ -24,8 +32,9 @@ export async function loadFont(font) {
       responseType: "arrayBuffer"
     });
   }
+  cachedFonts[fontKey] = { name, weight: Number(weight), data, style: "normal" };
   await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return cachedFonts[font] = { name, weight: Number(weight), data, style: "normal" };
+  return cachedFonts[fontKey];
 }
 export async function walkSatoriTree(url, node, plugins) {
   if (!node.props?.children)

package/dist/runtime/nitro/routes/debug.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("h3").EventHandler<{
+    runtimeConfig: any;
+}>;
+export default _default;

package/dist/runtime/nitro/routes/debug.mjs

@@ -0,0 +1,9 @@
+import { defineEventHandler, setHeader } from "h3";
+import { useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  setHeader(e, "Content-Type", "application/json");
+  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  return {
+    runtimeConfig
+  };
+});

package/dist/runtime/nitro/routes/html.mjs

@@ -1,29 +1,56 @@
 import { withBase } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, getQuery, sendRedirect } from "h3";
-import { fetchOptions, renderIsland, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
+import { hash } from "ohash";
+import { fetchOptions, useHostname } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const { fonts, defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const path = getQuery(e).path || "/";
-  const scale = getQuery(e).scale;
-  const mode = getQuery(e).mode || "light";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  const scale = query.scale;
+  const mode = query.mode || "light";
   let options;
-  if (getQuery(e).options)
-    options = JSON.parse(getQuery(e).options);
+  if (query.options) {
+    try {
+      options = JSON.parse(query.options);
+    } catch {
+    }
+  }
   if (!options)
     options = await fetchOptions(e, path);
-  if (options.provider === "browser" && !options.component)
-    return sendRedirect(e, withBase(path, useHostname(e)));
-  const island = await renderIsland(options);
+  if (options.provider === "browser" && !options.component) {
+    const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
+    return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
+  }
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+    });
+  }
+  const hashId = hash([options.component, options]);
+  const island = await $fetch(`/__nuxt_island/${options.component}:${hashId}`, {
+    params: {
+      props: JSON.stringify(options)
+    }
+  });
   const head = createHeadCore();
   head.push(island.head);
+  let defaultFontFamily = "sans-serif";
+  const firstFont = fonts[0];
+  if (firstFont) {
+    if (typeof firstFont === "string")
+      defaultFontFamily = firstFont.split(":")[0];
+    else
+      defaultFontFamily = firstFont.name;
+  }
   head.push({
     style: [
       {
         // default font is the first font family
-        innerHTML: `body { font-family: '${fonts[0].split(":")[0].replace("+", " ")}', sans-serif;  }`
+        innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
       },
       scale ? {
         innerHTML: `body {
@@ -43,7 +70,18 @@ img.emoji {
    vertical-align: -0.1em;
 }
 `
-      } : {}
+      } : {},
+      ...fonts.filter((font) => typeof font === "object").map((font) => {
+        const { name, weight, path: path2 } = font;
+        return `
+          @font-face {
+            font-family: '${name}';
+            font-style: normal;
+            font-weight: ${weight};
+            src: url('${path2}') format('truetype');
+          }
+          `;
+      })
     ],
     meta: [
       {
@@ -70,7 +108,7 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
-      ...fonts.map((font) => {
+      ...fonts.filter((font) => typeof font === "string").map((font) => {
         const [name, weight] = font.split(":");
         return {
           href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,

package/dist/runtime/nitro/routes/options.mjs

@@ -1,17 +1,21 @@
-import { createError, defineEventHandler, getHeaders, getQuery } from "h3";
-import { extractOgImageOptions, useHostname } from "../utils.mjs";
-import { getRouteRules, useRuntimeConfig } from "#internal/nitro";
+import { createError, defineEventHandler, getQuery } from "h3";
+import { withoutBase } from "ufo";
+import { extractOgImageOptions } from "../utils.mjs";
+import { getRouteRules, useNitroApp } from "#internal/nitro";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const query = getQuery(e);
-  const path = query.path || "/";
-  const fetchOptions = process.dev || process.env.prerender ? {
-    headers: getHeaders(e)
-  } : {
-    baseURL: useHostname(e)
-  };
-  const html = await globalThis.$fetch(path, {
-    ...fetchOptions
-  });
+  const path = withoutBase(query.path || "/", useRuntimeConfig().app.baseURL);
+  const nitro = useNitroApp();
+  let html;
+  try {
+    html = await (await nitro.localFetch(path)).text();
+  } catch (err) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
   const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload) {
     throw createError({
@@ -20,8 +24,10 @@ export default defineEventHandler(async (e) => {
     });
   }
   e.node.req.url = path;
+  const oldRouteRules = e.context._nitro.routeRules;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;
+  e.context._nitro.routeRules = oldRouteRules;
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
@@ -32,8 +38,6 @@ export default defineEventHandler(async (e) => {
     // use route rules
     ...routeRules || {},
     // use provided data
-    ...extractedPayload,
-    // use query data
-    ...query
+    ...extractedPayload
   };
 });

package/dist/runtime/nitro/routes/svg.mjs

@@ -2,8 +2,10 @@ import { createError, defineEventHandler, getQuery, setHeader } from "h3";
 import { withBase } from "ufo";
 import { fetchOptions, useHostname } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
-  const path = getQuery(e).path || "/";
+  const query = getQuery(e);
+  const path = withBase(query.path || "/", useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);