fix: resolve 404 images on GitHub Pages website#235
Conversation
… Pages Images were 404 on the live site because: - GitHub Pages was configured to serve from main/docs - images/ folder is at repo root, not in docs/ - Relative paths images/* in HTML resolved to docs/images/* which doesn't exist Fix: Replace all relative images/* references with absolute https://raw.githubusercontent.com/mholzi/beatify/main/images/* URLs. These serve directly from GitHub's content CDN and work regardless of the Pages source branch configuration. Also: Pages source was switched to gh-pages branch (which has the images/ folder correctly populated by the deploy workflow), so both path approaches now work.
Summary of ChangesHello @mholzi, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses and resolves the issue of broken image links on the project's GitHub Pages website. By converting relative image paths within the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request addresses 404 image issues by using absolute URLs pointing to GitHub's raw content CDN. No security vulnerabilities were found in the provided code changes. However, hardcoding the repository's full URL and the main branch name is a suboptimal pattern for open-source projects, as it breaks portability for forks and creates a maintenance dependency. For standard assets like favicons and images, using relative paths is recommended, leveraging the gh-pages branch deployment workflow, while absolute URLs remain suitable for Open Graph meta tags.
| <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/mholzi/beatify/main/images/icon.svg"> | ||
| <link rel="icon" type="image/png" sizes="192x192" href="https://raw.githubusercontent.com/mholzi/beatify/main/images/icon.png"> |
There was a problem hiding this comment.
Hardcoding absolute URLs to raw.githubusercontent.com (including the username and branch) makes the project less portable. If the repository is forked or the branch is renamed, these links will continue to point to the original source or break. Since the gh-pages deployment now includes the images/ directory, relative paths are preferred for better maintainability and to take advantage of same-origin loading. This applies to all similar changes in this PR.
| <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/mholzi/beatify/main/images/icon.svg"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="https://raw.githubusercontent.com/mholzi/beatify/main/images/icon.png"> | |
| <link rel="icon" type="image/svg+xml" href="images/icon.svg"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="images/icon.png"> |
| <nav class="nav" aria-label="Main navigation"> | ||
| <a href="#" class="logo" aria-label="Beatify Home"> | ||
| <img src="images/beatify-logo.png" alt="Beatify Logo" width="28" height="28" class="logo-img"> | ||
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/beatify-logo.png" alt="Beatify Logo" width="28" height="28" class="logo-img"> |
There was a problem hiding this comment.
Use a relative path for the logo image to ensure portability and better performance.
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/beatify-logo.png" alt="Beatify Logo" width="28" height="28" class="logo-img"> | |
| <img src="images/beatify-logo.png" alt="Beatify Logo" width="28" height="28" class="logo-img"> |
|
|
||
| <div class="hero-image"> | ||
| <img src="images/qr-lobby.png" alt="Beatify QR code lobby — guests scan to join the music trivia game" width="600" height="400" loading="eager"> | ||
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/qr-lobby.png" alt="Beatify QR code lobby — guests scan to join the music trivia game" width="600" height="400" loading="eager"> |
There was a problem hiding this comment.
Use a relative path for the hero image.
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/qr-lobby.png" alt="Beatify QR code lobby — guests scan to join the music trivia game" width="600" height="400" loading="eager"> | |
| <img src="images/qr-lobby.png" alt="Beatify QR code lobby — guests scan to join the music trivia game" width="600" height="400" loading="eager"> |
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/player-gameplay.png" alt="Player view — slide to guess the release year" width="320" height="200" loading="lazy"> | ||
| <p class="screenshot-caption">Slide to guess the release year — every second counts</p> | ||
| </div> | ||
| <div class="screenshot-card"> | ||
| <img src="images/reveal-screen.png" alt="Reveal screen — the year drops and gold confetti flies" width="320" height="200" loading="lazy"> | ||
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/reveal-screen.png" alt="Reveal screen — the year drops and gold confetti flies" width="320" height="200" loading="lazy"> | ||
| <p class="screenshot-caption">The year drops. The room erupts. Gold confetti for exact guesses.</p> | ||
| </div> | ||
| <div class="screenshot-card"> | ||
| <img src="images/podium-screen.png" alt="Podium screen — fireworks, medals, personal stats" width="320" height="200" loading="lazy"> | ||
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/podium-screen.png" alt="Podium screen — fireworks, medals, personal stats" width="320" height="200" loading="lazy"> |
There was a problem hiding this comment.
Use relative paths for the screenshot images.
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/player-gameplay.png" alt="Player view — slide to guess the release year" width="320" height="200" loading="lazy"> | |
| <p class="screenshot-caption">Slide to guess the release year — every second counts</p> | |
| </div> | |
| <div class="screenshot-card"> | |
| <img src="images/reveal-screen.png" alt="Reveal screen — the year drops and gold confetti flies" width="320" height="200" loading="lazy"> | |
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/reveal-screen.png" alt="Reveal screen — the year drops and gold confetti flies" width="320" height="200" loading="lazy"> | |
| <p class="screenshot-caption">The year drops. The room erupts. Gold confetti for exact guesses.</p> | |
| </div> | |
| <div class="screenshot-card"> | |
| <img src="images/podium-screen.png" alt="Podium screen — fireworks, medals, personal stats" width="320" height="200" loading="lazy"> | |
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/podium-screen.png" alt="Podium screen — fireworks, medals, personal stats" width="320" height="200" loading="lazy"> | |
| <img src="images/player-gameplay.png" alt="Player view — slide to guess the release year" width="320" height="200" loading="lazy"> | |
| <p class="screenshot-caption">Slide to guess the release year — every second counts</p> | |
| </div> | |
| <div class="screenshot-card"> | |
| <img src="images/reveal-screen.png" alt="Reveal screen — the year drops and gold confetti flies" width="320" height="200" loading="lazy"> | |
| <p class="screenshot-caption">The year drops. The room erupts. Gold confetti for exact guesses.</p> | |
| </div> | |
| <div class="screenshot-card"> | |
| <img src="images/podium-screen.png" alt="Podium screen — fireworks, medals, personal stats" width="320" height="200" loading="lazy"> |
| <div class="container"> | ||
| <div class="footer-logo"> | ||
| <img src="images/beatify-logo.png" alt="Beatify" width="24" height="24"> | ||
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/beatify-logo.png" alt="Beatify" width="24" height="24"> |
There was a problem hiding this comment.
Use a relative path for the footer logo image.
| <img src="https://raw.githubusercontent.com/mholzi/beatify/main/images/beatify-logo.png" alt="Beatify" width="24" height="24"> | |
| <img src="images/beatify-logo.png" alt="Beatify" width="24" height="24"> |
1 participant
Problem
All images on https://mholzi.github.io/beatify/ returned 404.
Root cause: GitHub Pages was configured to serve from
mainbranch,/docsfolder. Theimages/directory is at the repo root, not insidedocs/— so relative paths likeimages/qr-lobby.pngin the HTML resolved todocs/images/qr-lobby.pngwhich doesn't exist.Fix
Replace all relative
images/...references indocs/index.htmlwith absolutehttps://raw.githubusercontent.com/mholzi/beatify/main/images/URLs.These serve directly from GitHub's content CDN and work regardless of the Pages source branch configuration. This is a proven pattern for GitHub Pages projects that store assets outside the served directory.
Affected references (10 total):
beatify-logo.png(nav logo + footer)icon.svg/icon.png(favicons)qr-lobby.png(hero image)player-gameplay.png/reveal-screen.png/podium-screen.png(screenshots)social-preview.png(og:image + twitter:image — already absolute, unchanged)Additionally: GitHub Pages source was switched to the
gh-pagesbranch (via API) which already hasimages/correctly populated by the deploy workflow (cp -r images docs/images). This fix ensures images work in either Pages configuration.