Screenshot timeline thumbnails appear broken in reports

[mirhamasala]

Description:

When generating static reports using unlighthouse-ci, the timeline thumbnails for the screenshot step appear broken. A live example can be found at uxit.fil.org/site-audit-reports/ramo.

The full-page screenshot loads correctly, but the timeline thumbnails do not—indicating a potential issue in how thumbnail paths are being resolved or generated.

Configuration:

We are using a custom config for Unlighthouse located here.

Everything seems correctly saved under the appropriate folder and router prefix. The output directory and base path settings are configured, and most things display correctly except these thumbnails.

Comparison:

Here’s a comparison of the full-page screenshot path vs. the broken thumbnail path in the rendered HTML:

<!-- Full page screenshot - works -->
<img src="/site-audit-reports/ramo/reports/screenshot.jpeg" />

<!-- Timeline thumbnails - broken -->
<img src="reports/__screenshot-thumbnails__/0.jpeg" />

Note how the timeline thumbnail does not respect the configured router prefix (/site-audit-reports/ramo), leading to 404 errors when trying to display them.

Expected Behavior:

Thumbnails should use the correct router prefix or relative path so that they load correctly on the page.

Question:

Is there a missing config option to correctly resolve the thumbnail paths with a custom base path or output directory? Or is this a bug in how the paths are generated in the final HTML?

Environment:

"@unlighthouse/cli": "^0.16.3",
"@unlighthouse/core": "^0.16.3",

Thanks in advance! Let me know if you need more details.

Reproduction

• Repo
• Live

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 192.31 MB / 32.00 GB
    Shell: 4.0.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 23.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 8.7.6 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 122.1.63.174
    Chrome: 135.0.7049.97
    Safari: 18.3.1

[Daan5556]

Thanks for the detailed description!
The timeline thumbnails are using relative paths and that is indeed causing the issue in your current setup.

Please consider the following URL in your setup:

https://uxit.fil.org/site-audit-reports/ramo

Because this URL doesn't have a trailing /, the browser thinks that ramo is a resource (file), while its actually a directory. This is causing the 404 error because the thumbnail requests are being made to /site-audit-reports without including the /ramo path.

I would love to take a look at the source code and find out if the thumbnails could also use absolute paths for stability and consistency. In the meantime, I have 2 solutions for your current setup.

Solutions

1. To make sure that the browser understands that ramo is a path, you can tell Next.js to add trailing slashes by adding the following to the root in your nextConfig trailingSlash: true,
2. You can add <base href="/site-audit-reports/ramo/"> to the prerendered html.

With both methods I was able to render the thumbnails, but I recommend the second one, as this has no influence on the rest of your next app.

HTH

[mirhamasala]

@Daan5556 Thanks for the clear explanation ~ that helped a lot! ❤️

I went with the <base href="/site-audit-reports/ramo/"> approach and it fixed the issue without affecting the rest of our app. We now inject it automatically during our report generation.

Would be great if the source code could use absolute paths for thumbnails by default to avoid this edge case. Thanks again! ☀️