blog/frontend/app/composables/useMediaUrl.ts

import type { MediaImage } from '#shared/types/blog'

/**
 * PocketBase returns file paths relative to its own origin; the browser
 * needs absolute ones.
 */
export function useMediaUrl() {
  const { public: config } = useRuntimeConfig()

  return (image: MediaImage | null | undefined): string | null => {
    if (!image?.url) return null
    return image.url.startsWith('http') ? image.url : `${config.pocketbaseUrl}${image.url}`
  }
}