[Karakeep] Screenshots fail to display in list view due to URL encoding and WEBP format issues

[GRomR1]

Extension

https://www.raycast.com/luolei/karakeep

Raycast Version

1.104.3

OS Version

macOS 26.1

Description

I have encountered an issue where bookmark screenshots and asset images fail to render in the Bookmarks and Lists commands (specifically within the BookmarkItem preview).

After investigating the network requests and the codebase, I identified two root causes:

1. Missing Authentication/Pre-fetch in List View: The BookmarkItem component was manually constructing the image URL string. Unlike the detail view, it was not using the getScreenshot utility
   function, which performs an authenticated "pre-fetch" request (hack) to authorize the session and cache the image for Raycast to display.
2. WEBP Format Compatibility: The backend defaults to serving images in WEBP format. It appears that Raycast's Markdown renderer has trouble displaying these specific WEBP streams. Changing the
   Accept header to image/png resolves the rendering issue.
3. URL Encoding: There were inconsistencies in how the url parameter was being encoded in the constructed query string.

I have locally fixed this by refactoring BookmarkItem to use the getScreenshot async function and ensuring encodeURIComponent is applied correctly to the asset path.

Steps To Reproduce

1. Open the Karakeep extension.
2. Run the Bookmarks or Lists command.
3. Select a bookmark that has an associated screenshot or image asset.
4. Observe the Markdown preview pane on the right side.

Current Behaviour

The preview pane displays a broken image icon or remains empty.
When inspecting the requests, the image URL generation logic in BookmarkItem does not perform the necessary authenticated handshake, and the URL encoding for the asset path is sometimes incorrect
(e.g., issues with how /api/assets/... is passed to the Next.js image optimizer).

Expected Behaviour

The screenshot or asset image should load and display correctly in the preview pane of the list view, matching the behavior of the detailed view. The extension should request a PNG format to ensure
compatibility and correctly handle the URL encoding for the backend image proxy.

[raycastbot]

Thank you for opening this issue!

🔔 @foru17 @kdurek @foru17 @chrismessina you might want to have a look.

💡 Author and Contributors commands

The author and contributors of luolei/karakeep can trigger bot actions by commenting:

• @raycastbot close this issue Closes the issue.
• @raycastbot close as not planned Closes the issue as not planned.
• @raycastbot close as duplicate Closes the issue as duplicate.
• @raycastbot rename this issue to "Awesome new title" Renames the issue.
• @raycastbot reopen this issue Reopens the issue.
• @raycastbot assign me Assigns yourself to the issue.
• @raycastbot good first issue Adds the "Good first issue" label to the issue.
• @raycastbot keep this issue open Make sure the issue won't go stale and will be kept open by the bot.

[GRomR1]

I've open a PR with fixes that make Gemini for me. I've test them and it works.
Please review that PR because I'm not typescript developer.