nuxt-og-image 5.1.10 → 5.1.12

package/dist/runtime/server/og-image/context.js

@@ -0,0 +1,283 @@
+import { htmlPayloadCache, prerenderOptionsCache } from "#og-image-cache";
+import { theme } from "#og-image-virtual/unocss-config.mjs";
+import { useSiteConfig } from "#site-config/server/composables/useSiteConfig";
+import { createSitePathResolver } from "#site-config/server/composables/utils";
+import { createGenerator } from "@unocss/core";
+import presetWind from "@unocss/preset-wind3";
+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";
+import { separateProps } from "../../shared.js";
+import { decodeObjectHtmlEntities } from "../util/encoding.js";
+import { createNitroRouteRuleMatcher } from "../util/kit.js";
+import { logger } from "../util/logger.js";
+import { normaliseOptions } from "../util/options.js";
+import { useOgImageRuntimeConfig } from "../utils.js";
+import { useChromiumRenderer, useSatoriRenderer } from "./instances.js";
+export function resolvePathCacheKey(e, path) {
+  const siteConfig = useSiteConfig(e, {
+    resolveRefs: true
+  });
+  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path)));
+  return [
+    !basePath || basePath === "/" ? "index" : basePath,
+    hash([
+      basePath,
+      import.meta.prerender ? "" : siteConfig.url,
+      hash(getQuery(e))
+    ])
+  ].join(":");
+}
+export async function resolveContext(e) {
+  const runtimeConfig = useOgImageRuntimeConfig();
+  const resolvePathWithBase = createSitePathResolver(e, {
+    absolute: false,
+    withBase: true
+  });
+  const path = resolvePathWithBase(parseURL(e.path).pathname);
+  const extension = path.split(".").pop();
+  if (!extension) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Missing OG Image type.`
+    });
+  }
+  if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`
+    });
+  }
+  const query = getQuery(e);
+  let queryParams = {};
+  for (const k in query) {
+    const v = String(query[k]);
+    if (!v)
+      continue;
+    if (v.startsWith("{")) {
+      try {
+        queryParams[k] = JSON.parse(v);
+      } catch (error) {
+        if (import.meta.dev) {
+          logger.error(`[Nuxt OG Image] Invalid JSON in ${k} parameter: ${error.message}`);
+        }
+      }
+    } else {
+      queryParams[k] = v;
+    }
+  }
+  queryParams = separateProps(queryParams);
+  let basePath = withoutTrailingSlash(
+    path.replace(`/__og-image__/image`, "").replace(`/__og-image__/static`, "").replace(`/og.${extension}`, "")
+  );
+  if (queryParams._query && typeof queryParams._query === "object")
+    basePath = withQuery(basePath, queryParams._query);
+  const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
+  const key = resolvePathCacheKey(e, basePath);
+  let options = queryParams.options;
+  if (!options) {
+    if (import.meta.prerender) {
+      options = await prerenderOptionsCache.getItem(key);
+    }
+    if (!options) {
+      const payload = await fetchPathHtmlAndExtractOptions(e, basePath, key);
+      if (payload instanceof Error)
+        return payload;
+      options = payload;
+    }
+  }
+  delete queryParams.options;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  const routeRules = routeRuleMatcher(basePath);
+  if (typeof routeRules.ogImage === "undefined" && !options) {
+    return createError({
+      statusCode: 400,
+      statusMessage: "The route is missing the Nuxt OG Image payload or route rules."
+    });
+  }
+  const ogImageRouteRules = separateProps(routeRules.ogImage);
+  options = defu(queryParams, options, ogImageRouteRules, runtimeConfig.defaults);
+  if (!options) {
+    return createError({
+      statusCode: 404,
+      statusMessage: "[Nuxt OG Image] OG Image not found."
+    });
+  }
+  let renderer;
+  switch (options.renderer) {
+    case "satori":
+      renderer = await useSatoriRenderer();
+      break;
+    case "chromium":
+      renderer = await useChromiumRenderer();
+      break;
+  }
+  if (!renderer || renderer.__mock__) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is not enabled.`
+    });
+  }
+  const unocss = await createGenerator({ theme }, {
+    presets: [
+      presetWind()
+    ]
+  });
+  const ctx = {
+    unocss,
+    e,
+    key,
+    renderer,
+    isDebugJsonPayload,
+    runtimeConfig,
+    publicStoragePath: runtimeConfig.publicStoragePath,
+    extension,
+    basePath,
+    options: normaliseOptions(options),
+    _nitro: useNitroApp()
+  };
+  await ctx._nitro.hooks.callHook("nuxt-og-image:context", ctx);
+  return ctx;
+}
+const PAYLOAD_REGEX = /<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/;
+function getPayloadFromHtml(html) {
+  const match = String(html).match(PAYLOAD_REGEX);
+  return match ? String(match[1]) : null;
+}
+export function extractAndNormaliseOgImageOptions(html) {
+  const _payload = getPayloadFromHtml(html);
+  let options = false;
+  try {
+    const payload2 = parse(_payload || "{}");
+    Object.entries(payload2).forEach(([key, value]) => {
+      if (!value && value !== 0)
+        delete payload2[key];
+    });
+    options = payload2;
+  } catch (e) {
+    if (import.meta.dev)
+      console.warn("Failed to parse #nuxt-og-image-options", e, options);
+  }
+  if (options && typeof options?.props?.description === "undefined") {
+    const description = html.match(/<meta[^>]+name="description"[^>]*>/)?.[0];
+    if (description) {
+      const [, content] = description.match(/content="([^"]+)"/) || [];
+      if (content && !options.props.description)
+        options.props.description = content;
+    }
+  }
+  const payload = decodeObjectHtmlEntities(options || {});
+  if (import.meta.dev) {
+    const socialPreview = {};
+    const socialMetaTags = html.match(/<meta[^>]+(property|name)="(twitter|og):([^"]+)"[^>]*>/g);
+    if (socialMetaTags) {
+      socialMetaTags.forEach((tag) => {
+        const [, , type, key] = tag.match(/(property|name)="(twitter|og):([^"]+)"/);
+        const value = tag.match(/content="([^"]+)"/)?.[1];
+        if (!value)
+          return;
+        if (!socialPreview[type])
+          socialPreview[type] = {};
+        socialPreview[type][key] = value;
+      });
+    }
+    payload.socialPreview = socialPreview;
+  }
+  return payload;
+}
+async function doFetchWithErrorHandling(fetch, path) {
+  const res = await fetch(path, {
+    redirect: "follow",
+    headers: {
+      accept: "text/html"
+    }
+  }).catch((err) => {
+    return err;
+  });
+  let errorDescription;
+  if (res.status >= 300 && res.status < 400) {
+    if (res.headers.has("location")) {
+      return await doFetchWithErrorHandling(fetch, res.headers.get("location") || "");
+    }
+    errorDescription = `${res.status} redirected to ${res.headers.get("location") || "unknown"}`;
+  } else if (res.status >= 500) {
+    errorDescription = `${res.status} error: ${res.statusText}`;
+  }
+  if (errorDescription) {
+    return [null, createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Failed to parse \`${path}\` for og-image extraction. ${errorDescription}`
+    })];
+  }
+  if (res._data) {
+    return [res._data, null];
+  } else if (res.text) {
+    return [await res.text(), null];
+  }
+  return ["", null];
+}
+async function fetchPathHtmlAndExtractOptions(e, path, key) {
+  const cachedHtmlPayload = await htmlPayloadCache.getItem(key);
+  if (!import.meta.dev && cachedHtmlPayload && cachedHtmlPayload.expiresAt < Date.now())
+    return cachedHtmlPayload.value;
+  let _payload = null;
+  let [html, err] = await doFetchWithErrorHandling(e.fetch, path);
+  if (err) {
+    logger.warn(err);
+  } else {
+    _payload = getPayloadFromHtml(html);
+  }
+  if (!_payload) {
+    const [fallbackHtml, err2] = await doFetchWithErrorHandling(globalThis.$fetch.raw, path);
+    if (err2) {
+      return err2;
+    }
+    _payload = getPayloadFromHtml(fallbackHtml);
+    if (_payload) {
+      html = fallbackHtml;
+    }
+  }
+  if (!html) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Failed to read the path ${path} for og-image extraction, returning no HTML.`
+    });
+  }
+  if (!_payload) {
+    const payload2 = extractAndNormaliseOgImageOptions(html);
+    if (payload2 && typeof payload2 === "object" && payload2.socialPreview?.og?.image) {
+      const image = payload2.socialPreview.og.image;
+      const p = {
+        custom: true,
+        url: typeof image === "string" ? image : image
+      };
+      if (typeof image === "object" && image["image:width"]) {
+        p.width = image["image:width"];
+      }
+      if (typeof image === "object" && image["image:height"]) {
+        p.height = image["image:height"];
+      }
+      return p;
+    }
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] HTML response from ${path} is missing the #nuxt-og-image-options script tag. Make sure you have defined an og image for this page.`
+    });
+  }
+  const payload = extractAndNormaliseOgImageOptions(html);
+  if (!import.meta.dev && payload) {
+    await htmlPayloadCache.setItem(key, {
+      // 60 minutes for prerender, 10 seconds for runtime
+      expiresAt: Date.now() + 1e3 * (import.meta.prerender ? 60 * 60 : 10),
+      value: payload
+    });
+  }
+  return typeof payload === "object" ? payload : createError({
+    statusCode: 500,
+    statusMessage: "[Nuxt OG Image] Invalid payload type."
+  });
+}

package/dist/runtime/server/og-image/instances.d.ts

@@ -0,0 +1,2 @@
+export declare function useSatoriRenderer(): Promise<import("../../types.js").Renderer>;
+export declare function useChromiumRenderer(): Promise<import("../../types.js").Renderer>;

package/dist/runtime/server/og-image/instances.js

@@ -0,0 +1,10 @@
+const satoriRendererInstance = { instance: void 0 };
+const chromiumRendererInstance = { instance: void 0 };
+export async function useSatoriRenderer() {
+  satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#og-image/renderers/satori").then((m) => m.default);
+  return satoriRendererInstance.instance;
+}
+export async function useChromiumRenderer() {
+  chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#og-image/renderers/chromium").then((m) => m.default);
+  return chromiumRendererInstance.instance;
+}

package/dist/runtime/server/og-image/satori/font.d.ts

@@ -0,0 +1,3 @@
+import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../../types.js';
+export declare const assets: import("unstorage").Storage<any>;
+export declare function loadFont({ e, publicStoragePath }: OgImageRenderEventContext, font: ResolvedFontConfig): Promise<ResolvedFontConfig>;

package/dist/runtime/server/og-image/satori/font.js

@@ -0,0 +1,40 @@
+import { useNitroOrigin } from "#site-config/server/composables";
+import { useStorage } from "nitropack/runtime";
+import { prefixStorage } from "unstorage";
+export const assets = prefixStorage(useStorage(), "/assets");
+export async function loadFont({ e, publicStoragePath }, font) {
+  const { name, weight } = font;
+  if (font.data)
+    return font;
+  if (font.key && await assets.hasItem(font.key)) {
+    let fontData = await assets.getItem(font.key);
+    if (fontData instanceof Uint8Array) {
+      const decoder = new TextDecoder();
+      fontData = decoder.decode(fontData);
+    }
+    font.data = Buffer.from(String(fontData), "base64");
+    return font;
+  }
+  let data;
+  if (font.path) {
+    if (import.meta.dev || import.meta.prerender) {
+      const key = `${publicStoragePath}${font.path.replace("./", ":").replace("/", ":")}`;
+      if (await useStorage().hasItem(key))
+        data = await useStorage().getItemRaw(key) || void 0;
+    } else {
+      data = await e.$fetch(font.path, {
+        baseURL: useNitroOrigin(e),
+        responseType: "arrayBuffer"
+      });
+    }
+  } else {
+    data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
+      responseType: "arrayBuffer",
+      query: {
+        font
+      }
+    });
+  }
+  font.data = data;
+  return font;
+}

package/dist/runtime/server/og-image/satori/instances.d.ts

@@ -0,0 +1,41 @@
+import type _satori from 'satori';
+import type _sharp from 'sharp';
+export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
+    free(): void;
+    render(): {
+        free(): void;
+        asPng(): Uint8Array;
+        readonly height: number;
+        readonly pixels: Uint8Array;
+        readonly width: number;
+    };
+    toString(): string;
+    innerBBox(): {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    getBBox(): {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    cropByBBox(bbox: {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    }): void;
+    imagesToResolve(): any[];
+    resolveImage(href: string, buffer: Uint8Array): void;
+    readonly height: number;
+    readonly width: number;
+}>;
+export declare function useSatori(): Promise<typeof _satori>;
+export declare function useSharp(): Promise<typeof _sharp>;
+export declare function useCssInline(): Promise<any>;

package/dist/runtime/server/og-image/satori/instances.js

@@ -0,0 +1,23 @@
+const cssInlineInstance = { instance: void 0 };
+const sharpInstance = { instance: void 0 };
+const resvgInstance = { instance: void 0 };
+const satoriInstance = { instance: void 0 };
+export async function useResvg() {
+  resvgInstance.instance = resvgInstance.instance || await import("#og-image/bindings/resvg").then((m) => m.default);
+  await resvgInstance.instance.initWasmPromise;
+  return resvgInstance.instance.Resvg;
+}
+export async function useSatori() {
+  satoriInstance.instance = satoriInstance.instance || await import("#og-image/bindings/satori").then((m) => m.default);
+  await satoriInstance.instance.initWasmPromise;
+  return satoriInstance.instance.satori;
+}
+export async function useSharp() {
+  sharpInstance.instance = sharpInstance.instance || await import("#og-image/bindings/sharp").then((m) => m.default);
+  return sharpInstance.instance;
+}
+export async function useCssInline() {
+  cssInlineInstance.instance = cssInlineInstance.instance || await import("#og-image/bindings/css-inline").then((m) => m.default);
+  await cssInlineInstance.instance.initWasmPromise;
+  return cssInlineInstance.instance.cssInline;
+}

package/dist/runtime/server/og-image/satori/plugins/classes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/classes.js

@@ -0,0 +1,17 @@
+import { defineSatoriTransformer } from "../utils.js";
+export default defineSatoriTransformer([
+  {
+    filter: (node) => !!node.props?.class && !node.props?.tw,
+    transform(node) {
+      node.props.tw = node.props.class;
+      node.props.tw = node.props.tw.replace(/icon|inline-style/g, "");
+    }
+  },
+  {
+    filter: (node) => !!node.props?.style?.display,
+    transform(node) {
+      if (["inline-block", "inline"].includes(node.props.style.display))
+        delete node.props.style.display;
+    }
+  }
+]);

package/dist/runtime/server/og-image/satori/plugins/emojis.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/emojis.js

@@ -0,0 +1,28 @@
+import { defineSatoriTransformer } from "../utils.js";
+function isEmojiFilter(node) {
+  return node.type === "svg" && typeof node.props?.["data-emoji"] !== "undefined";
+}
+export default defineSatoriTransformer([
+  // need to make sure parent div has flex for the emoji to render inline
+  {
+    filter: (node) => ["div", "p"].includes(node.type) && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+    transform: (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.display = "flex";
+      node.props.style.alignItems = "center";
+      node.props.children = node.props.children.map((child) => {
+        if (typeof child === "string") {
+          return {
+            type: "div",
+            props: {
+              children: child
+            }
+          };
+        }
+        if (child.props.class?.includes("emoji"))
+          delete child.props.class;
+        return child;
+      });
+    }
+  }
+]);

package/dist/runtime/server/og-image/satori/plugins/encoding.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/encoding.js

@@ -0,0 +1,17 @@
+import { decodeHtml } from "../../../util/encoding.js";
+import { defineSatoriTransformer } from "../utils.js";
+export default defineSatoriTransformer([
+  // clean up
+  {
+    filter: (node) => node.props?.["data-v-inspector"],
+    transform: (node) => {
+      delete node.props["data-v-inspector"];
+    }
+  },
+  {
+    filter: (node) => typeof node.props?.children === "string",
+    transform: (node) => {
+      node.props.children = decodeHtml(node.props.children);
+    }
+  }
+]);

package/dist/runtime/server/og-image/satori/plugins/flex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/flex.js

@@ -0,0 +1,60 @@
+import { defineSatoriTransformer } from "../utils.js";
+const BLOCK_ELEMENTS = [
+  "div",
+  "p",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "hr",
+  "table",
+  "dl"
+];
+const INLINE_ELEMENTS = [
+  "span",
+  "a",
+  "b",
+  "i",
+  "u",
+  "em",
+  "strong",
+  "code",
+  "abbr",
+  "del",
+  "ins",
+  "mark",
+  "sub",
+  "sup",
+  "small",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5"
+];
+export default defineSatoriTransformer({
+  filter: (node) => [...INLINE_ELEMENTS, "div"].includes(node.type) && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && !node.props?.class?.includes("hidden"),
+  transform: (node) => {
+    node.props.style = node.props.style || {};
+    if (node.props.style?.display && node.props.style?.display !== "flex") {
+      return;
+    }
+    if (node.type === "div") {
+      node.props.style.display = "flex";
+      if (!node.props?.class?.includes("flex-") && Array.isArray(node.props.children) && node.props.children.some((child) => BLOCK_ELEMENTS.includes(child.type))) {
+        node.props.style.flexDirection = "column";
+        return;
+      }
+    }
+    let flexWrap = node.props?.class?.includes("flex-wrap");
+    if (!node.props?.class?.includes("flex-")) {
+      node.props.style.flexWrap = "wrap";
+      flexWrap = true;
+    }
+    if (flexWrap && !node.props?.class?.includes("gap")) {
+      node.props.style.gap = "0.2em";
+    }
+  }
+});

package/dist/runtime/server/og-image/satori/plugins/imageSrc.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;

package/dist/runtime/server/og-image/satori/plugins/imageSrc.js

@@ -0,0 +1,107 @@
+import { useNitroOrigin } from "#site-config/server/composables/useNitroOrigin";
+import sizeOf from "image-size";
+import { useStorage } from "nitropack/runtime";
+import { withBase, withoutLeadingSlash } from "ufo";
+import { toBase64Image } from "../../../../shared.js";
+import { decodeHtml } from "../../../util/encoding.js";
+import { logger } from "../../../util/logger.js";
+import { defineSatoriTransformer } from "../utils.js";
+async function resolveLocalFilePathImage(publicStoragePath, src) {
+  const normalizedSrc = withoutLeadingSlash(
+    src.replace("_nuxt/@fs/", "").replace("_nuxt/", "").replace("./", "")
+  );
+  const key = `${publicStoragePath}:${normalizedSrc}`;
+  if (await useStorage().hasItem(key))
+    return await useStorage().getItemRaw(key);
+}
+export default defineSatoriTransformer([
+  // fix <img src="">
+  {
+    filter: (node) => node.type === "img" && node.props?.src,
+    transform: async (node, { e, publicStoragePath, runtimeConfig }) => {
+      let src = node.props.src;
+      const isRelative = src.startsWith("/");
+      let dimensions;
+      let imageBuffer;
+      if (src.endsWith(".webp")) {
+        logger.warn("Using WebP images with Satori is not supported. Please consider switching image format or use the chromium renderer.", src);
+      }
+      if (isRelative) {
+        if (import.meta.prerender || import.meta.dev) {
+          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "");
+          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
+        }
+        if (!imageBuffer) {
+          imageBuffer = await e.$fetch(src, { responseType: "arrayBuffer" }).catch(() => {
+          });
+          if (!imageBuffer && !import.meta.prerender) {
+            imageBuffer = await e.$fetch(src, {
+              baseURL: useNitroOrigin(e),
+              responseType: "arrayBuffer"
+            }).catch(() => {
+            });
+          }
+        }
+        if (imageBuffer) {
+          const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
+          node.props.src = toBase64Image(buffer);
+        }
+      } else if (!src.startsWith("data:")) {
+        src = decodeHtml(src);
+        node.props.src = src;
+        imageBuffer = await $fetch(src, {
+          responseType: "arrayBuffer"
+        }).catch(() => {
+        });
+      }
+      if (imageBuffer && (!node.props.width || !node.props.height)) {
+        try {
+          const imageSize = sizeOf(imageBuffer);
+          dimensions = { width: imageSize.width, height: imageSize.height };
+        } catch {
+        }
+        if (dimensions?.width && dimensions?.height) {
+          const naturalAspectRatio = dimensions.width / dimensions.height;
+          if (node.props.width && !node.props.height) {
+            node.props.height = Math.round(node.props.width / naturalAspectRatio);
+          } else if (node.props.height && !node.props.width) {
+            node.props.width = Math.round(node.props.height * naturalAspectRatio);
+          } else if (!node.props.width && !node.props.height) {
+            node.props.width = dimensions.width;
+            node.props.height = dimensions.height;
+          }
+        }
+      }
+      if (typeof node.props.src === "string" && node.props.src.startsWith("/")) {
+        if (imageBuffer) {
+          const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
+          node.props.src = toBase64Image(buffer);
+        } else {
+          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+        }
+      }
+    }
+  },
+  // fix style="background-image: url('')"
+  {
+    filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
+    transform: async (node, { e, publicStoragePath, runtimeConfig }) => {
+      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 srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "/");
+          const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
+          if (imageBuffer) {
+            const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
+            const base64 = toBase64Image(buffer);
+            node.props.style.backgroundImage = `url(${base64})`;
+          }
+        } else {
+          node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
+        }
+      }
+    }
+  }
+]);

package/dist/runtime/server/og-image/satori/plugins/nuxt-icon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types.js").SatoriTransformer | import("../../../../types.js").SatoriTransformer[];
+export default _default;