templates: fix Media component failing when setting a custom serverURL #12214
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… 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
changed the title
paulpopus
changed the title
|
Thanks for your PR! Looks good to me, though could you copy these changes to the There's a separate known issue with postgres in our CI, you might be able to get it to pass by merging latest |
…deoMedia-fails-when-set-serverURL-config
Refactors media URL handling for Image and Video components
done |
…ils-when-set-serverURL-config
…ils-when-set-serverURL-config
paulpopus
approved these changes
May 7, 2025
dsm23
added a commit
to dsm23/dsm23-next-payloadcms-template
that referenced
this pull request
May 15, 2025
dsm23
added a commit
to dsm23/dsm23-bun-next-payloadcms-template
that referenced
this pull request
May 15, 2025
dsm23
added a commit
to dsm23/dsm23-next-payloadcms-postgres-template
that referenced
this pull request
May 15, 2025
kendelljoseph
pushed a commit
that referenced
this pull request
May 15, 2025
#12214) ### What? Fixes #12171 ### Why? Previously, the ImageMedia component was not properly handling URL formatting when a serverURL was configured in Payload. This caused images to fail to load when using a custom serverURL. By extracting the URL handling logic into a separate utility function, we ensure consistent URL processing across both image and video components. ### How? 1. Created a new utility function getMediaUrl in `src/utilities/getMediaUrl.ts` that: - Properly checks for HTTP/HTTPS protocols - Handles null or undefined URL values - Supports cache tags to prevent caching issues - Uses `getClientSideURL()` for relative paths 2. Updated the ImageMedia component to use this utility function instead of inline URL processing logic 3. Updated the VideoMedia component to also use the same utility function for consistency
|
🚀 This is included in version v3.38.0 |
kendelljoseph
pushed a commit
that referenced
this pull request
May 19, 2025
#12214) ### What? Fixes #12171 ### Why? Previously, the ImageMedia component was not properly handling URL formatting when a serverURL was configured in Payload. This caused images to fail to load when using a custom serverURL. By extracting the URL handling logic into a separate utility function, we ensure consistent URL processing across both image and video components. ### How? 1. Created a new utility function getMediaUrl in `src/utilities/getMediaUrl.ts` that: - Properly checks for HTTP/HTTPS protocols - Handles null or undefined URL values - Supports cache tags to prevent caching issues - Uses `getClientSideURL()` for relative paths 2. Updated the ImageMedia component to use this utility function instead of inline URL processing logic 3. Updated the VideoMedia component to also use the same utility function for consistency
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #12171
Why?
Previously, the ImageMedia component was not properly handling URL formatting when a serverURL was configured in Payload. This caused images to fail to load when using a custom serverURL. By extracting the URL handling logic into a separate utility function, we ensure consistent URL processing across both image and video components.
How?
src/utilities/getMediaUrl.tsthat:getClientSideURL()for relative paths