fix: replacing .png inside the component params (#493)

Author: ThibaudDauce

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

@@ -57,7 +57,7 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
   // Parse encoded params from URL path (Cloudinary-style)
   // URL format: /_og/d/w_1200,title_Hello.png
   // Hash mode: /_og/d/o_<hash>.png (for long URLs)
-  const encodedSegment = (path.split('/').pop() as string).replace(`.${extension}`, '')
+  const encodedSegment = (path.split('/').pop() as string).replace(new RegExp(`\\.${extension}$`), '')
 
   // Check for hash mode (o_<hash>)
   const hashMatch = encodedSegment.match(/^o_([a-z0-9]+)$/i)

test/e2e/prop-with-extension.test.ts

@@ -0,0 +1,27 @@
+import { createResolver } from '@nuxt/kit'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+import { encodeOgImageParams } from '../../src/runtime/shared/urlEncoding'
+
+const { resolve } = createResolver(import.meta.url)
+
+describe.skipIf(!import.meta.env?.TEST_DEV)('prop values containing file extensions', async () => {
+  await setup({
+    rootDir: resolve('../fixtures/basic'),
+    dev: true,
+  })
+
+  // Regression: context.ts used String.replace(`.${extension}`, '') which replaces
+  // the FIRST occurrence. When a prop value contains the same extension as the
+  // output format AND there are other params after it, the extension inside the
+  // prop gets stripped instead of the trailing one.
+  it('preserves .html in prop value when output format is also .html', async () => {
+    const encoded = encodeOgImageParams({
+      component: 'PropTest.satori',
+      props: { logo: 'https://example.com/page.html', title: 'test' },
+      _path: '/satori',
+    })
+    const html = await $fetch(`/_og/d/${encoded}.html`) as string
+    expect(html).toContain('https://example.com/page.html')
+  }, 60000)
+})

test/fixtures/basic/components/OgImage/PropTest.satori.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  logo?: string
+}>(), {
+  logo: '',
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-white">
+    <p class="text-2xl">
+      {{ logo }}
+    </p>
+  </div>
+</template>