Vben Admin 2.0 中 TinyMCE 富文本组件 Base64 图片显示问题排查记录

一、问题背景

在 Vben Admin 2.0 项目中使用内置 TinyMCE 富文本组件时，需要实现图片 Base64 编码直接嵌入内容的功能。自定义了图片上传后的处理函数 handleDone，但修改 data URI 前缀后出现显示异常。注意：接口上传图片返回的是链接不用修改

二、问题现象对比

1. 正常场景（正确前缀）

代码实现：

ts 复制代码

function handleDone(name: string, type: string, url: string) {

 const editor = unref(editorRef);

 if (!editor) {

   return;

 }

 const content = editor?.getContent() ?? '';

 // 使用图片对应的 MIME 类型（如 image/png、image/jpeg）

 const val = content?.replace(getUploadingImgName(name), \`\<img src="data:\${type};base64,\${url}" />\`) ?? '';

 setValue(editor, val);

}

效果：

富文本框中正常显示图片
审查元素可见完整 <img> 标签，src 为 data:image/xxx;base64,... 格式
浏览器能正确解析 Base64 图片数据

2. 异常场景（错误前缀）

代码实现：

ts 复制代码

function handleDone(name: string, type: string, url: string) {

 const editor = unref(editorRef);

 if (!editor) {

   return;

 }

 const content = editor?.getContent() ?? '';

 // 错误使用 application/force-download 作为 MIME 类型

 const val = content?.replace(getUploadingImgName(name), \`\<img src="data:application/force-download;base64,\${url}" />\`) ?? '';

 setValue(editor, val);

}

效果：

审查元素可见 <img> 标签，语法无错误
富文本框中图片显示为空白（无破损图标，纯空白）
相同 <img> 标签直接嵌入普通 HTML 文件时可正常显示图片

三、核心原因分析

1. 关键知识点：data URI 语法规范

data URI 是用于直接嵌入小型资源的协议，标准格式为：

ts 复制代码

data:\[\<mediatype>]\[;base64],\<data>

其中 <mediatype> 必须是符合 IANA 规范的 MIME 类型，用于告知浏览器资源类型，浏览器仅在识别该类型时才会正确解析。

2. 两种 MIME 类型的本质区别

前缀格式	MIME 类型说明	适用场景	浏览器 / 编辑器处理逻辑
`data:${type};base64,`（如 `image/png`）	标准图片 MIME 类型，明确标识资源为图片	图片渲染场景	浏览器识别为图片，解码 Base64 并渲染；TinyMCE 允许通过内容过滤
`data:application/force-download;base64,`	非标准图片类型，用于强制文件下载	文件下载接口响应头配置	浏览器视为 "待下载文件" 而非可渲染图片；TinyMCE 因安全过滤拒绝渲染

3. 富文本与原生 HTML 差异的核心

原生 HTML 环境 ：浏览器解析时会启动 "MIME 类型嗅探" 机制，即使 MIME 类型声明错误，也会通过 Base64 数据的字节特征（如 PNG 文件头 89 50 4E 47）识别实际资源类型，因此能正常显示图片。
TinyMCE 环境 ：为保障编辑区域安全和稳定性，TinyMCE 内置严格的内容过滤（sanitization）机制，仅允许白名单内的 MIME 类型通过。application/force-download 不在图片 MIME 类型白名单中，导致编辑器拒绝渲染该图片资源，仅保留标签结构。

四、解决方案

1. 核心修复方案

保留正确的图片 MIME 类型前缀，确保 data URI 符合规范：

ts 复制代码

function handleDone(name: string, type: string, url: string) {

 const editor = unref(editorRef);

 if (!editor) {

   return;

 }

 const content = editor?.getContent() ?? '';

 // 确保 \${type} 传递的是图片对应的 MIME 类型（如 image/png、image/jpeg）

 const val = content?.replace(getUploadingImgName(name), \`\<img src="data:\${type};base64,\${url}" />\`) ?? '';

 setValue(editor, val);

}

2. 补充说明

确保 type 参数的正确性：上传图片时需获取文件的真实 MIME 类型（可通过 file.type 获取），避免手动硬编码错误类型。
禁止使用非图片类 MIME 类型：如 application/octet-stream、application/force-download 等均不适合图片渲染场景。

五、总结

规范优先 ：data URI 的 MIME 类型必须与资源实际类型匹配，图片资源务必使用 image/xxx 系列类型。
编辑器特性：TinyMCE 等富文本组件的内容过滤机制比原生 HTML 更严格，需遵循其白名单规则。
避坑提醒 ：application/force-download 仅适用于文件下载接口的响应头配置，不可用于图片 src 属性。

通过遵循 MIME 类型规范和富文本组件的特性要求，可彻底解决 Base64 图片显示异常问题，同时保证代码的兼容性和规范性。

（注：文档部分内容可能由 AI 生成）