HTML插入本地图片核心是路径写法：必须用相对路径（如<img src="images/cat.jpg">）或本地服务器（http://localhost）访问，禁用file://绝对路径及file:///前缀，鸿蒙等特殊环境需用resource://rawfile/协议。
HTML 编辑器插入本地图片，核心不是“能不能贴”，而是“路径怎么写才被认得”。直接拖进编辑器生成的 file:/// 路径在多数现代编辑器里会被拦截或失效，必须手动替换为相对路径或资源协议。
编辑器是否支持本地文件系统访问
绝大多数基于 iframe 或 contenteditable 的富文本编辑器（如 UEditor、Quill、TinyMCE）默认禁用 file:// 协议加载资源。双击打开 HTML 文件时，浏览器会阻止跨目录读取，导致 <img src="D:/imgs/cat.jpg"> 或 <img src="file:///D:/imgs/cat.jpg"> 全部 404。
- 开发阶段务必用本地 HTTP 服务启动，比如 Python 的
python -m http.server 8000，然后访问http://localhost:8000/index.html - 编辑器初始化时若配置了
baseUrl或imagePath，需确保它指向服务器可解析的路径，而非磁盘绝对路径 - 某些编辑器（如鸿蒙
RichText）提供专用协议，例如resource://rawfile/images/logo.png，此时必须配合$rawfile()加载机制使用
相对路径怎么写才不翻车
相对路径以当前 HTML 文件所在位置为起点，不是项目根目录，也不是编辑器 JS 文件的位置。常见错误是把路径写成 ./src/assets/img.png，结果 HTML 在 /pages/article.html，根本找不到 src/。
- 图片和 HTML 同目录：
<img src="icon.png"> - 图片在同级
images/下：<img src="images/photo.jpg"> - HTML 在
/pages/detail.html，图片在/assets/img/：<img src="../assets/img/chart.svg">（向上跳一级到根，再进 assets） - Windows 下路径分隔符必须用
/，.\img\logo.png或images\cat.jpg会失败 - 路径中含中文或空格（如
我的图.png）易被 URL 编码异常，优先重命名为my-chart.png
上传后插入图片的典型流程（FreeTextBox / UEditor 类）
这类编辑器不直接读取本地磁盘，而是走“上传 → 服务返回 URL → 插入 HTML”链路。前端调用的不是 insertImage('C:\...')，而是 insertImage('/upload/20260904_abc123.jpg')。
立即学习“前端免费学习笔记（深入）”；
- 点击上传按钮后，弹出独立窗口（如
upload_img.aspx），表单提交到后端 - 后端保存文件，返回可公开访问的路径（注意：不是磁盘路径，是相对于 Web 根目录的路径，如
/uploads/logo.png） - 前端收到响应后，执行类似
editor.execCommand('insertHtml', '<img src="/uploads/logo.png" alt="logo">') - 关键点：
src值必须能被浏览器直接 GET 到，检查 Network 面板是否返回 200；alt属性不能省，否则部分编辑器拒绝渲染
鸿蒙 RichText 的 resource:// 协议特殊处理
鸿蒙 HarmonyOS 6 的 RichText 不走常规 Web 路径规则，它要求图片必须放在 src/main/resources/rawfile/ 目录下，并通过 resource://rawfile/ 协议引用。HTML 文件本身也得用 $rawfile('page.html') 加载，否则协议不生效。
- 目录结构必须是：
rawfile/index.html+rawfile/images/cat.png - HTML 中写：
<img src="resource://rawfile/images/cat.png">（不能漏掉resource://rawfile/） - 如果图片放在
rawfile/subdir/pic.jpg，路径就得是resource://rawfile/subdir/pic.jpg，没有“..”向上跳级的概念 - 构建时若未将
rawfile内容打包进 HAP，运行时会静默失败，无报错——必须确认 build-profile.json 中已声明该资源目录
最容易被忽略的是环境一致性：本地双击打开、HTTP 服务、鸿蒙模拟器、真机运行，四者对路径的解析逻辑完全不同。调试前先确认你当前跑在哪种环境，再选对应路径方案，别混用 ./、/ 和 resource://。
