Skip to content

[BugFix] Adding missing public folder and images #82

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

Open
moda20 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[BugFix] Adding missing public folder and images #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# Type Scheduler UI

<img src="src/assets/images/TypeSchedulerLogo.png" alt="Type Scheduler UI Logo" width="200" />
<img src="public/images/TypeSchedulerLogo.png" alt="Type Scheduler UI Logo" width="200" />

**A SPA interface for managing Type scheduler scheduled tasks, proxies, and more**

Expand Down
0 src/assets/images/TypeSchedulerLogo.png → public/images/TypeSchedulerLogo.png
View file
Open in desktop
File renamed without changes
0 ...ts/images/TypeSchedulerLogoSimplified.png → ...ic/images/TypeSchedulerLogoSimplified.png
View file
Open in desktop
File renamed without changes
2 changes: 1 addition & 1 deletion src/components/version-switcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function VersionSwitcher() {
>
<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"
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 29, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 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:

🏁 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 -20

Repository: 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 -20

Repository: 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 -50

Repository: moda20/TypeSchedulerUI

Length of output: 1503

🏁 Script executed:

# Check vite config for base path configuration
cat vite.config.ts

Repository: 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 2

Repository: 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 tsx

Repository: 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 1

Repository: 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_modules

Repository: 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.

Suggested change
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.

className="size-9"
/>
</div>
Expand Down