Ayuriel/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: route local file paths through raw-file API in webchat markdown images

Browse Source 
Images in webchat markdown messages (e.g. agent screenshots) fail to
load because the img component passes local filesystem paths directly
as <img src>, which the browser cannot resolve.

The chain-of-thought component already handles this via
resolveMediaUrl(), but the ReactMarkdown img override did not.

Now non-HTTP/data src values are proxied through
/api/workspace/raw-file?path=... so the server can resolve and serve
local files.
This commit is contained in:
youssef 2026-02-17 04:36:28 +00:00
parent 4965e3ca67
commit 92c76dc4ce
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/app/components/chat-message.tsx
View File

@ -556,12 +556,16 @@ const mdComponents: Components = {
</a>
);
},
// Render images with loading=lazy
img: ({ src, alt, ...props }) => (
// eslint-disable-next-line @next/next/no-img-element
<img src={src} alt={alt ?? ""} loading="lazy" {...props} />
),
// Syntax-highlighted fenced code blocks
// Render images — route local file paths through raw-file API
img: ({ src, alt, ...props }) => {
const resolvedSrc = typeof src === "string" && !src.startsWith("http://") && !src.startsWith("https://") && !src.startsWith("data:")
? `/api/workspace/raw-file?path=${encodeURIComponent(src)}`
: src;
return (
// eslint-disable-next-line @next/next/no-img-element
<img src={resolvedSrc} alt={alt ?? ""} loading="lazy" {...props} />
);
},
pre: ({ children, ...props }) => {
// react-markdown wraps code blocks in <pre><code>...
// Extract the code element to get lang + content