Skip to content

fix(ColorModeImage): add baseURL support for public paths#6006

Merged
benjamincanac merged 5 commits intonuxt:v4from
veeceey:fix/issue-5916-colormodeimage-baseurl
Feb 12, 2026
Merged

fix(ColorModeImage): add baseURL support for public paths#6006
benjamincanac merged 5 commits intonuxt:v4from
veeceey:fix/issue-5916-colormodeimage-baseurl

Conversation

@veeceey
Copy link
Contributor

@veeceey veeceey commented Feb 8, 2026

Summary

Changes

ColorModeImage now properly prepends the app.baseURL to image paths starting with /, ensuring images display correctly in production environments with custom base URLs. This implementation matches the existing behavior in the ProseImg component.

Testing

Manual testing:

  1. Set app.baseURL in nuxt.config.ts (e.g., /base-url/)
  2. Use ColorModeImage with public folder paths:
<UColorModeImage light="/light.png" dark="/dark.png" />
  1. Verify images load correctly in production with the baseURL prepended
  2. Verify images starting with // (external URLs) are not affected
  3. Verify images already containing the baseURL are not duplicated

Fixes nuxt#5916

ColorModeImage component now properly adds the app.baseURL to public
folder paths (starting with '/'), ensuring images work correctly in
production with custom base URLs. This matches the behavior of other
image components like ProseImg.
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 8, 2026

📝 Walkthrough

Walkthrough

The ColorModeImage component was migrated to the Composition API and now computes refinedLight and refinedDark using resolveBaseURL(props.light/props.dark, useRuntimeConfig().app.baseURL), replacing direct prop bindings in the template. A new resolveBaseURL utility was added to utils, and useRuntimeConfig() was stubbed in src/runtime/vue/stubs/base.ts returning a static app.baseURL. Similar URL-refinement updates replaced manual URL-joining logic in prose image components. No public API signatures were changed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding baseURL support for public paths to the ColorModeImage component.
Description check ✅ Passed The description clearly explains the fix, changes, and testing approach, directly addressing issue #5916 about ColorModeImage not handling baseURL.
Linked Issues check ✅ Passed The PR successfully implements all objectives from issue #5916: adds baseURL support to ColorModeImage [#5916], handles protocol-relative URLs correctly, and avoids duplication.
Out of Scope Changes check ✅ Passed All changes are in scope: ColorModeImage refactoring, new resolveBaseURL utility for centralized URL resolution, and import reordering in related components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Add useRuntimeConfig to the Vue stubs so the color-mode components
build correctly in the non-Nuxt (Vue-only) build path.

Also extract the base URL resolution logic into a shared helper
function to reduce duplication between light and dark computed
properties.
@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 12, 2026

npm i https://pkg.pr.new/@nuxt/ui@6006

commit: f63a535

@benjamincanac benjamincanac changed the title fix: add baseURL support to ColorModeImage for public paths fix(ColorModeImage): add baseURL support for public paths Feb 12, 2026
Copy link
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! 😊

@benjamincanac benjamincanac merged commit db510f3 into nuxt:v4 Feb 12, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ColorModeImage not adding BaseURL to Public path.

2 participants