Skip to content

Website template's ImageMedia component fails if serverURL is set in Payload's config #12171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
MasterAM opened this issue Apr 21, 2025 · 0 comments · May be fixed by #12214
Open

Website template's ImageMedia component fails if serverURL is set in Payload's config #12171

MasterAM opened this issue Apr 21, 2025 · 0 comments · May be fixed by #12214
Assignees
@paulpopus

Comments

@MasterAM
Copy link

Describe the Bug

When using the website template, if the serverURL is set, the ImageMedia generates an invalid URL with the origin applied twice.

Image

Link to the code that reproduces this issue

https://github.com/MasterAM/payload-media-image-issue

Reproduction Steps

Using the reproduction repo:

  • The serverURL configuration was added to the main branch. It should error after seeding and navigating to the main page.
  • The seeded data + media was added to the with-data branch. When running it, the website's front page would present the error.
  • A possible fix is in the fix/image-media-url-error branch.

From scratch:

  1. Add a non-empty serverURL value to the Payload config of a newly created website template.
  2. Create a user and seed the DB using the seed link in the admin panel.
  3. Go to the front-end's main page, which should now fail to load with the aforementioned error in the console.

Which area(s) are affected? (Select all that apply)

area: templates

Environment Info

Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.35.1
  next: 15.3.1
  @payloadcms/db-postgres: 3.35.1
  @payloadcms/email-nodemailer: 3.35.1
  @payloadcms/graphql: 3.35.1
  @payloadcms/live-preview: 3.35.1
  @payloadcms/live-preview-react: 3.35.1
  @payloadcms/next/utilities: 3.35.1
  @payloadcms/payload-cloud: 3.35.1
  @payloadcms/plugin-form-builder: 3.35.1
  @payloadcms/plugin-nested-docs: 3.35.1
  @payloadcms/plugin-redirects: 3.35.1
  @payloadcms/plugin-search: 3.35.1
  @payloadcms/plugin-seo: 3.35.1
  @payloadcms/richtext-lexical: 3.35.1
  @payloadcms/translations: 3.35.1
  @payloadcms/ui/shared: 3.35.1
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
@MasterAM MasterAM added status: needs-triage Possible bug which hasn't been reproduced yet validate-reproduction Auto-added tag on create to tell bot to check recreation URL, removed after check. labels Apr 21, 2025
@github-actions github-actions bot removed the validate-reproduction Auto-added tag on create to tell bot to check recreation URL, removed after check. label Apr 21, 2025
Rot4tion added a commit to Rot4tion/payload that referenced this issue Apr 25, 2025
@Rot4tion
Fixes payloadcms#12171: Website template's ImageMedia component fails…
c83a9f6 
… if serverURL is set in Payload's config

Replaces URL construction with dedicated media URL function

Implements a new utility function for constructing media URLs, enhancing code maintainability and clarity.

Updates the ImageMedia and VideoMedia components to utilize the new function for generating source URLs, improving consistency in URL handling.
@Rot4tion Rot4tion linked a pull request Apr 25, 2025 that will close this issue
Open
@paulpopus paulpopus self-assigned this Apr 25, 2025
@github-actions github-actions bot removed the status: needs-triage Possible bug which hasn't been reproduced yet label Apr 25, 2025
Rot4tion added a commit to Rot4tion/payload that referenced this issue Apr 29, 2025
@Rot4tion
Fixes payloadcms#12171 for with-vercel-website template
311a1d9 
Refactors media URL handling for Image and Video components
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@paulpopus paulpopus

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

templates: fix Media component failing when setting a custom serverURL Rot4tion/payload
2 participants
@MasterAM @paulpopus