[BugFix] Adding missing public folder and images#82
Conversation
📝 WalkthroughWalkthroughTwo logo image paths have been updated from Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/version-switcher.tsx`:
- Line 27: The image src is hardcoded as
"/images/TypeSchedulerLogoSimplified.png" which breaks when the app base path
changes; update the src in the VersionSwitcher component's img element to build
the path from import.meta.env.BASE_URL (e.g., prefix the filename with
import.meta.env.BASE_URL + "images/TypeSchedulerLogoSimplified.png") so the logo
resolves correctly regardless of Vite base configuration.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 2bdb27fe-3c6d-424a-b2f1-9e558ce52d2f
⛔ Files ignored due to path filters (2)
public/images/TypeSchedulerLogo.pngis excluded by!**/*.pngpublic/images/TypeSchedulerLogoSimplified.pngis excluded by!**/*.png
📒 Files selected for processing (2)
README.mdsrc/components/version-switcher.tsx
| <div className="flex border-primary border-2 aspect-square size-12 items-center justify-center rounded-lg bg-white text-sidebar-primary-foreground"> | ||
| <img | ||
| src="src/assets/images/TypeSchedulerLogoSimplified.png" | ||
| src="/images/TypeSchedulerLogoSimplified.png" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In Vite, does using an absolute asset path like "/images/logo.png" bypass the configured base path in production builds, and is import.meta.env.BASE_URL the recommended approach for public assets?
💡 Result:
No, using an absolute asset path like "/images/logo.png" (intended for public dir assets) does not bypass the configured base path in production builds when the base is absolute (e.g., "/myapp/"). However, Vite does not automatically prepend the base to hardcoded absolute paths in source code like <img src="/images/logo.png"> or '/images/logo.png' in JS strings during build—these remain as "/images/logo.png", which resolves correctly only if base is "/" or relative, but fails for subpath deploys like "/myapp/" (actual path becomes "/myapp/images/logo.png"). This is evidenced by multiple GitHub issues and Stack Overflow reports where public assets fail to load under non-root base without manual adjustment. For imported assets (e.g., import logo from '/images/logo.png'), Vite resolves and processes them to respect the base. The recommended approach for public assets when needing base support (especially dynamic or non-root base) is to use import.meta.env.BASE_URL + '/images/logo.png' for string references, or prefer importing assets directly (which get hashed and base-adjusted automatically). Official docs recommend importing over public dir unless specific needs (no hashing, no import), and explicitly note using import.meta.env.BASE_URL for dynamic URL concatenation in production builds.
Citations:
- 1: https://vite.dev/guide/assets
- 2: Base path not prepended for static assets in public directory vitejs/vite#10601
- 3: https://stackoverflow.com/questions/74168824/vite-not-prepending-base-path-to-anything-in-public-directory
- 4: https://main.vite.dev/guide/build
- 5: https://v4.vitejs.dev/guide/build
- 6: https://vitejs.dev/guide/env-and-mode.html
- 7: https://vite.dev/guide/env-and-mode
🏁 Script executed:
# Check if this is a Vite project and find vite config
fd -e ts -e js -e json 'vite\.config|tsconfig|package\.json' | head -20Repository: moda20/TypeSchedulerUI
Length of output: 144
🏁 Script executed:
# Search for hardcoded image paths in the codebase
rg '(src|href)=["'\'']/(images|assets|public)' --type jsx --type tsx --type js --type ts | head -20Repository: moda20/TypeSchedulerUI
Length of output: 93
🏁 Script executed:
# Check the actual file context to understand the component better
cat -n src/components/version-switcher.tsx | head -50Repository: moda20/TypeSchedulerUI
Length of output: 1503
🏁 Script executed:
# Check vite config for base path configuration
cat vite.config.tsRepository: moda20/TypeSchedulerUI
Length of output: 505
🏁 Script executed:
# Search for all hardcoded /images paths to see if this is a pattern
rg '(src|href)=["'\'']/(images|assets|public)' -t ts -t tsx -A 2 -B 2Repository: moda20/TypeSchedulerUI
Length of output: 93
🏁 Script executed:
# Check if there are other image imports/references using different patterns
rg 'TypeSchedulerLogoSimplified|/images/' -t ts -t tsxRepository: moda20/TypeSchedulerUI
Length of output: 93
🏁 Script executed:
# Search for image references without strict type filtering
rg '(src|href)=.*/(images|assets|public)' -A 1 -B 1Repository: moda20/TypeSchedulerUI
Length of output: 409
🏁 Script executed:
# Check if import.meta.env.BASE_URL is used anywhere in the codebase
rg 'import\.meta\.env\.BASE_URL'Repository: moda20/TypeSchedulerUI
Length of output: 48
🏁 Script executed:
# Check public directory structure
ls -la public/ 2>/dev/null || echo "No public directory found"Repository: moda20/TypeSchedulerUI
Length of output: 229
🏁 Script executed:
# Check if images directory exists
find . -type d -name images -o -type d -name assets 2>/dev/null | grep -v node_modulesRepository: moda20/TypeSchedulerUI
Length of output: 94
Use environment-aware asset paths for future deployment flexibility.
The hardcoded /images/ path works currently because vite.config.ts sets base: "/", but would break if the app is deployed under a subpath (e.g., base: "/myapp/"). Use import.meta.env.BASE_URL to ensure the logo loads correctly regardless of the base configuration.
Suggested fix
- src="/images/TypeSchedulerLogoSimplified.png"
+ src={`${import.meta.env.BASE_URL}images/TypeSchedulerLogoSimplified.png`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| src="/images/TypeSchedulerLogoSimplified.png" | |
| src={`${import.meta.env.BASE_URL}images/TypeSchedulerLogoSimplified.png`} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/version-switcher.tsx` at line 27, The image src is hardcoded
as "/images/TypeSchedulerLogoSimplified.png" which breaks when the app base path
changes; update the src in the VersionSwitcher component's img element to build
the path from import.meta.env.BASE_URL (e.g., prefix the filename with
import.meta.env.BASE_URL + "images/TypeSchedulerLogoSimplified.png") so the logo
resolves correctly regardless of Vite base configuration.
1 participant
BugFixes :
Summary by CodeRabbit