b6acbf6f30
粘贴/插入的图片落盘与相对引用本身没问题，但编辑区从未解析相对路径： 页面在应用源下按相对路径取图必 404、只剩裂图。新增 image NodeView， 仅显示层把本地图片按文档目录归一化后经 read_file_base64 读成 data URL； 文档内容不变，Web 模式不启用。vitest 83 通过 + 2 跳过。
30 lines
2.2 KiB
Markdown
30 lines
2.2 KiB
Markdown
# 图片粘贴不显示修复（2026-11-14，验收新问题）
|
||
|
||
## 现象
|
||
|
||
在已保存文档里粘贴/插入图片，编辑区只有一个裂图占位（截图即如此），图片不显示。
|
||
|
||
## 根因（显示侧缺失，与粘贴本身无关）
|
||
|
||
粘贴/插入流程本身是通的：图片落盘到 `<文档名>.assets/`、文档里写入相对路径（如 `alpha.assets/image-*.png`）。但**编辑区的显示从来没有做过相对路径解析**：编辑器页面运行在应用源（tauri.localhost）下，浏览器把相对路径按应用源去找图，必然 404 → 裂图。之前各阶段的验证都在 Web 模式（图片是 data URL、能直接显示），Tauri 下相对路径图片的显示一直是空白区，验收才撞上。
|
||
|
||
## 修法
|
||
|
||
只动显示层，文档内容与落盘方式不变：
|
||
|
||
- `src/editor/plugins.ts` 新增图片 NodeView 插件：image 节点渲染时，本地图片（相对/绝对/file:// 路径）先放透明占位，再异步换成解析出的 data URL；http/data/blob 地址直通。
|
||
- 解析由 App 注入（`resolveImageDisplay`）：按当前文档目录归一化路径（复用导出管线同款的盘符/.. 处理），经既有 Rust 命令 `read_file_base64` 读文件转 data URL。Web 模式不启用该插件，保持原行为。
|
||
- 读不到（文件缺失）时保留占位与 alt，不崩溃、文档不变。
|
||
|
||
## 验证
|
||
|
||
- 新增 `tests/image-display.test.ts` 3 例：相对路径图片 DOM 中被换成 data URL 且序列化仍是相对路径；粘贴图片（落盘相对路径）同样能显示；文件缺失不崩溃。
|
||
- 全量：tsc 0 错误、vitest **83 通过 + 2 跳过**、`npm run build` 通过。
|
||
- jsdom 排查注记：upload 插件以 `instanceof ClipboardEvent/DragEvent` 把关事件，jsdom 缺这两个全局会导致粘贴链在测试里假死，测试文件已垫回。
|
||
|
||
## 复验建议（Windows）
|
||
|
||
- 在已保存文档里 Ctrl+V 粘贴一张截图：应立即显示图片本体，文档里仍是相对路径引用。
|
||
- 拖入一张图片文件、菜单插入一张图片：同样应显示。
|
||
- 把 .assets 里某张图改名后重开文档：该图位置为空占位（alt 文本在），其余内容不受影响。
|