diff --git a/frontend/src/components/chat/MessageItem.vue b/frontend/src/components/chat/MessageItem.vue
index 5469b1e..043c3c9 100644
--- a/frontend/src/components/chat/MessageItem.vue
+++ b/frontend/src/components/chat/MessageItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { IncremarkContent } from '@incremark/vue'
 import { fetchMessageThoughts } from '@/api'
@@ -8,6 +8,7 @@ import type { WsEvent } from '@/types/ws'
 import type { ToolCard } from '@/stores/session'
 import { useSessionStore } from '@/stores/session'
 import { type MessageBlock } from '@/composables/useMessageBlocks'
+import { rewriteWorkspaceImages } from '@/composables/useWorkspaceImageUrls'
 import ToolCallCard from '@/components/chat/ToolCallCard.vue'
 
 const props = defineProps<{ message: ChatMessage }>()
@@ -15,6 +16,51 @@ const props = defineProps<{ message: ChatMessage }>()
 const { t } = useI18n()
 const sessionStore = useSessionStore()
 
+/** 消息根节点：用于扫描 markdown 渲染出的 <img>，把工作区相对路径改写为文件直链 */
+const rootRef = ref<HTMLElement | null>(null)
+
+/** 当前会话所属工作区 id（把它拼进 /workspaces/:id/files/raw 直链） */
+const workspaceId = computed(() => sessionStore.activeSession?.workspaceId ?? null)
+
+/**
+ * 把消息里 markdown 图片的「工作区相对路径」改写为 ZACP 文件直链。
+ *
+ * 为什么需要：agent（如 grok）写的是 `![](comfyuir任务/x.png)`，浏览器按同源相对
+ * URL 请求会命中 SPA fallback（返回 index.html）→ 必然断裂图。
+ * 端点已有（文件浏览器的图片预览就在用），聊天渲染此前没接上，见
+ * composables/useWorkspaceImageUrls.ts 顶部说明。
+ *
+ * 触发时机：挂载后先扫一次（历史消息）+ MutationObserver 跟随流式渲染新增的 <img>
+ * + workspaceId 就绪后补扫（会话列表可能晚于消息到达）。
+ */
+function applyWorkspaceImages() {
+  rewriteWorkspaceImages(rootRef.value, workspaceId.value)
+}
+
+let imgObserver: MutationObserver | null = null
+
+onMounted(() => {
+  applyWorkspaceImages()
+  if (typeof MutationObserver !== 'undefined' && rootRef.value) {
+    imgObserver = new MutationObserver(() => applyWorkspaceImages())
+    imgObserver.observe(rootRef.value, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['src'],
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  imgObserver?.disconnect()
+  imgObserver = null
+})
+
+// 流式内容变化 / 工作区 id 晚到时补扫（MutationObserver 已覆盖多数场景，这里兜底）
+watch([() => props.message.content, workspaceId], () => {
+  void nextTick(applyWorkspaceImages)
+})
+
 /** 思考过程滚动容器（展开后的内容区，限高 + 滚动，避免长思考把页面撑开） */
 const reasoningBodyRef = ref<HTMLElement | null>(null)
 
@@ -266,7 +312,7 @@ const visibleBlocks = computed<MessageBlock[]>(() =>
 </script>
 
 <template>
-  <div class="flex flex-col gap-2" :class="isUser ? 'items-end' : 'items-start'">
+  <div ref="rootRef" class="flex flex-col gap-2" :class="isUser ? 'items-end' : 'items-start'">
     <!-- 思维/推理文本（流式实时 + 历史按需加载；折叠展示，点击展开查看） -->
     <!-- 与 AI 内容一致：固定占用整个可用内容宽度（w-full），无 max 宽度限制 -->
     <!-- 展示依据：hasThought（本地内容或 events 存在 agent_thought type）；新后端列表接口
diff --git a/frontend/src/composables/useWorkspaceImageUrls.ts b/frontend/src/composables/useWorkspaceImageUrls.ts
new file mode 100644
index 0000000..aacd050
--- /dev/null
+++ b/frontend/src/composables/useWorkspaceImageUrls.ts
@@ -0,0 +1,91 @@
+import { fetchPreviewUrl, fileRawUrl } from '@/api'
+
+/**
+ * 聊天消息里 markdown 图片的「工作区相对路径 → 文件直链」改写。
+ *
+ * 背景：agent（如 grok）在回复里写 `![飞天 1](comfyuir任务/feitian_1_00001_.png)`，
+ * 该路径是相对 agent 工作目录（= 会话工作区根）的。浏览器会把 <img src> 当同源
+ * 相对 URL 去请求，落到 SPA fallback 返回 index.html → 图片必然渲染失败（断裂图）。
+ * ZACP 本身有文件直链端点（文件浏览器用它做图片预览），聊天渲染此前没有接上，
+ * 这里补齐：把这类相对路径换成 `/api/v1/workspaces/:id/files/raw?...` 直链。
+ *
+ * 只处理「工作区相对路径」，外链 / data: / blob: / 站点绝对路径一律不动。
+ */
+
+/** 已解析的直链缓存：key = `${workspaceId}\u0000${path}`（资源 token 12 小时有效，缓存到刷新即可） */
+const urlCache = new Map<string, Promise<string>>()
+
+/** 处理标记（dataset 键）：流式重渲染会反复扫描同一批 <img>，避免重复发请求/重复改写 */
+const MARK = 'zacpWsImage'
+
+/**
+ * 是否是「工作区相对路径」——只有这种才改写：
+ * - 空串 → 否
+ * - 带协议（http: / https: / data: / blob: / file: …）→ 否（外链或内联数据）
+ * - 以 `/` 或 `//` 开头 → 否（站点绝对路径 / 协议相对地址）
+ * - 以 `#` 开头 → 否（锚点）
+ */
+export function isWorkspaceRelativeImageSrc(src: string): boolean {
+  const v = (src ?? '').trim()
+  if (!v) return false
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(v)) return false
+  if (v.startsWith('/') || v.startsWith('#')) return false
+  return true
+}
+
+/** 归一化相对路径：去掉 query/hash（工作区路径不含这些），并剥掉开头的 `./` */
+export function normalizeWorkspaceImagePath(src: string): string {
+  const noQuery = src.trim().split('#')[0].split('?')[0]
+  return noQuery.replace(/^\.\//, '')
+}
+
+/**
+ * 取文件直链：优先「资源 token 直链」（开关认证后 <img> 也能用，token 与登录态分离），
+ * 换取失败则退化为无 token 直链（认证关闭时后端直接放行）。
+ */
+export function resolveWorkspaceImageUrl(workspaceId: number, path: string): Promise<string> {
+  const key = `${workspaceId}\u0000${path}`
+  let pending = urlCache.get(key)
+  if (!pending) {
+    pending = fetchPreviewUrl(workspaceId, path).catch(() => fileRawUrl(workspaceId, path))
+    urlCache.set(key, pending)
+  }
+  return pending
+}
+
+/**
+ * 扫描 root 下所有 <img>，把工作区相对路径改写为文件直链。
+ * 幂等：已处理过的 <img> 直接跳过（幂等标记写在 dataset 上）。
+ * 失败静默：宁可维持原状也不让渲染抛错。
+ */
+export function rewriteWorkspaceImages(
+  root: HTMLElement | null | undefined,
+  workspaceId: number | null | undefined,
+): void {
+  if (!root || !workspaceId) return
+  root.querySelectorAll('img').forEach((img) => {
+    if (img.dataset[MARK]) return
+    const src = img.getAttribute('src') ?? ''
+    if (!isWorkspaceRelativeImageSrc(src)) {
+      img.dataset[MARK] = 'skip'
+      return
+    }
+    const path = normalizeWorkspaceImagePath(src)
+    if (!path) {
+      img.dataset[MARK] = 'skip'
+      return
+    }
+    img.dataset[MARK] = 'pending'
+    resolveWorkspaceImageUrl(workspaceId, path)
+      .then((url) => {
+        // 期间若已被卸载/改写（理论不发生），不再动它
+        if (img.dataset[MARK] === 'pending') {
+          img.src = url
+          img.dataset[MARK] = 'ok'
+        }
+      })
+      .catch(() => {
+        img.dataset[MARK] = 'skip'
+      })
+  })
+}