fix(image): 编辑区相对路径图片显示解析(docs/16)
粘贴/插入的图片落盘与相对引用本身没问题,但编辑区从未解析相对路径: 页面在应用源下按相对路径取图必 404、只剩裂图。新增 image NodeView, 仅显示层把本地图片按文档目录归一化后经 read_file_base64 读成 data URL; 文档内容不变,Web 模式不启用。vitest 83 通过 + 2 跳过。
This commit is contained in:
29
docs/16-image-display-fix.md
Normal file
29
docs/16-image-display-fix.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 图片粘贴不显示修复(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 文本在),其余内容不受影响。
|
||||
Reference in New Issue
Block a user