tauri 应用中 vue 组件渲染二进制图像的有效方法
本文介绍在使用 Tauri、Vue3 和 markdown-it 构建的 Markdown 解析器中，如何正确渲染二进制图像，解决由于安全策略限制导致图像显示失败的问题。
初始尝试中，我们尝试修改 tauri.conf.json 的 CSP 和文件系统配置，并使用 window.btoa 将二进制数据转换为 Base64 字符串，但图像仍然显示损坏或无法加载。 即使尝试在 Rust 后端读取文件并将其作为 Blob 传递给前端，或者直接使用前端的 FS 模块读取本地文件，问题依然存在。
问题的核心在于将二进制图像数据转换为前端可用的格式。 直接将 Uint8Array 转换为字符串再编码为 Base64 会导致数据丢失，从而无法正确显示图像。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
最终解决方案是直接使用 Blob 对象。 将 Uint8Array 数据直接传入 Blob 构造函数，指定类型为 "image/png" (或其他图像类型)，然后使用 URL.createObjectURL(blob) 生成 URL，并将其赋值给 img 标签的 src 属性。 此方法避免了不必要的字符串转换，直接利用浏览器对 Blob 对象的原生支持，从而成功显示图像。
以下代码片段展示了该解决方案：
let img_path = "E:/myProjects2/tauri_vue/mdren/img/a-1-01.png";
const contents = await readBinaryFile(img_path);
let blob = new Blob([contents], { type: "image/png" });
async function reloadImg() {
console.log("function called");
let img_element = document.querySelectorAll("#img-to-remove");
console.log(img_element);
img_element.forEach(async (element) => {
element.src = URL.createObjectURL(blob);
});
}
通过 URL.createObjectURL 方法创建和使用 Blob 对象，我们成功解决了在 Tauri 应用中 Vue 组件渲染二进制图像的问题。 之前的失败尝试可能与 CSP 配置不当或 Rust 后端数据处理错误有关，但此方法有效地绕过了这些问题。
