From 79f01c938bfc045fc6a851b78b391cfc846bddf6 Mon Sep 17 00:00:00 2001
From: Behon Baker <53905713+BayBreezy@users.noreply.github.com>
Date: Fri, 16 Oct 2026 08:25:33 -0700
Subject: [PATCH] fix(useStrapiMedia): use public URL during server rendering

---
 docs/content/3.usage.md                   |  2 ++
 src/runtime/composables/useStrapiMedia.ts |  2 +-
 test/e2e/media.test.ts                    | 30 +++++++++++++++++++++++
 test/fixtures/media/app.vue               | 25 +++++++++++++++++++
 test/fixtures/media/nuxt.config.ts        | 18 ++++++++++++++
 test/unit/useStrapiMedia.test.ts          | 13 ++++++----
 6 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 test/e2e/media.test.ts
 create mode 100644 test/fixtures/media/app.vue
 create mode 100644 test/fixtures/media/nuxt.config.ts

diff --git a/docs/content/3.usage.md b/docs/content/3.usage.md
index a6a4930a..c5057852 100644
--- a/docs/content/3.usage.md
+++ b/docs/content/3.usage.md
@@ -258,6 +258,8 @@ const version = useStrapiVersion()
 
 This composable is a helper to get the full URL for media. Strapi endpoints return media URLs as relative paths (e.g. `/uploads/image.png`) on self-hosted instances, or absolute URLs on Strapi Cloud. This composable handles both cases automatically.
 
+Relative media paths use `runtimeConfig.public.strapi.url`, including during server-side rendering and static generation, so the URLs are accessible to browsers even when the server uses a different internal Strapi URL.
+
 ```vue
 <script setup>
 const imageUrl = useStrapiMedia('/uploads/image.png')
diff --git a/src/runtime/composables/useStrapiMedia.ts b/src/runtime/composables/useStrapiMedia.ts
index c401fe16..a0805ce4 100644
--- a/src/runtime/composables/useStrapiMedia.ts
+++ b/src/runtime/composables/useStrapiMedia.ts
@@ -6,7 +6,7 @@ export const useStrapiMedia = (path: string): string => {
     return path
   }
 
-  const config = import.meta.server ? useRuntimeConfig() : useRuntimeConfig().public
+  const config = useRuntimeConfig().public
 
   return joinURL(config.strapi.url, path)
 }
diff --git a/test/e2e/media.test.ts b/test/e2e/media.test.ts
new file mode 100644
index 00000000..a0648542
--- /dev/null
+++ b/test/e2e/media.test.ts
@@ -0,0 +1,30 @@
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { $fetch, setup, useTestContext } from '@nuxt/test-utils/e2e'
+
+const expectPublicMedia = (html: string) => {
+  expect(html).toContain('src="https://media.example.com/uploads/image.jpg"')
+  expect(html).toContain('src="https://media.example.com/uploads/no-leading-slash.jpg"')
+  expect(html).toContain('src="https://cdn.example.com/image.jpg"')
+  expect(html).toContain('src="http://cdn.example.com/image.jpg"')
+  expect(html).not.toContain('src="http://localhost:1337/')
+  expect(html).toContain('id="api-url">http://localhost:1337/api</p>')
+}
+
+describe('Strapi media with separate client/server URLs', async () => {
+  await setup({
+    rootDir: new URL('../fixtures/media', import.meta.url).pathname
+  })
+
+  it('uses the public media URL during server rendering', async () => {
+    expectPublicMedia(await $fetch('/'))
+  })
+
+  it('uses the public media URL in prerendered HTML', async () => {
+    const { nuxt } = useTestContext()
+    const html = await readFile(join(nuxt.options.nitro.output.dir, 'public/prerender/index.html'), 'utf8')
+
+    expectPublicMedia(html)
+  })
+})
diff --git a/test/fixtures/media/app.vue b/test/fixtures/media/app.vue
new file mode 100644
index 00000000..7f533bf9
--- /dev/null
+++ b/test/fixtures/media/app.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useStrapiMedia, useStrapiUrl } from '#imports'
+
+const mediaUrls = [
+  '/uploads/image.jpg',
+  'uploads/no-leading-slash.jpg',
+  'https://cdn.example.com/image.jpg',
+  'http://cdn.example.com/image.jpg'
+].map(path => useStrapiMedia(path))
+const apiUrl = useStrapiUrl()
+</script>
+
+<template>
+  <div>
+    <img
+      v-for="url in mediaUrls"
+      :key="url"
+      :src="url"
+      alt="Strapi media"
+    >
+    <p id="api-url">
+      {{ apiUrl }}
+    </p>
+  </div>
+</template>
diff --git a/test/fixtures/media/nuxt.config.ts b/test/fixtures/media/nuxt.config.ts
new file mode 100644
index 00000000..e8fdcff3
--- /dev/null
+++ b/test/fixtures/media/nuxt.config.ts
@@ -0,0 +1,18 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import strapi from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [strapi],
+  pages: false,
+  devtools: { enabled: false },
+  runtimeConfig: {
+    strapi: { url: 'http://localhost:1337', token: '' },
+    public: {
+      strapi: { url: 'https://media.example.com', token: '' }
+    }
+  },
+  compatibilityDate: '2026-05-06',
+  nitro: {
+    prerender: { routes: ['/prerender'], crawlLinks: false }
+  }
+})
diff --git a/test/unit/useStrapiMedia.test.ts b/test/unit/useStrapiMedia.test.ts
index 73658d3b..7107d9c3 100644
--- a/test/unit/useStrapiMedia.test.ts
+++ b/test/unit/useStrapiMedia.test.ts
@@ -3,11 +3,14 @@ import { describe, expect, it, vi } from 'vitest'
 import { useStrapiMedia } from '../../src/runtime/composables/useStrapiMedia'
 
 const mockConfig = {
-  strapi: { url: 'http://localhost:1337', prefix: '/api', version: 'v5' }
+  strapi: { url: 'http://localhost:1337', prefix: '/api', version: 'v5' },
+  public: {
+    strapi: { url: 'https://media.example.com', prefix: '/api', version: 'v5' }
+  }
 }
 
 vi.mock('#imports', () => ({
-  useRuntimeConfig: () => ({ public: mockConfig })
+  useRuntimeConfig: () => mockConfig
 }))
 
 describe('useStrapiMedia', () => {
@@ -26,13 +29,13 @@ describe('useStrapiMedia', () => {
       .toBe('https://domain.media.strapiapp.com/uploads/image.jpg')
   })
 
-  it('joins relative paths with strapi URL', () => {
+  it('joins relative paths with the public Strapi URL', () => {
     expect(useStrapiMedia('/uploads/image.jpg'))
-      .toBe('http://localhost:1337/uploads/image.jpg')
+      .toBe('https://media.example.com/uploads/image.jpg')
   })
 
   it('joins paths without leading slash', () => {
     expect(useStrapiMedia('uploads/image.jpg'))
-      .toBe('http://localhost:1337/uploads/image.jpg')
+      .toBe('https://media.example.com/uploads/image.jpg')
   })
 })