本文介绍在使用 Tauri、Vue3 和 markdown-it 构建的 Markdown 解析器中，如何正确渲染二进制图像，解决由于安全策略限制导致图像显示失败的问题。
初始尝试中，我们尝试修改 tauri.conf.json 的 CSP 和文件系统配置，并使用 window.btoa 将二进制数据转换为 Base64 字符串，但图像仍然显示损坏或无法加载。 即使尝试在 Rust 后端读取文件并将其作为 Blob 传递给前端，或者直接使用前端的 FS 模块读取本地文件，问题依然存在。
问题的核心在于将二进制图像数据转换为前端可用的格式。 直接将 Uint8Array 转换为字符串再编码为 Base64 会导致数据丢失，从而无法正确显示图像。
立即学习“前端免费学习笔记（深入）”；
最终解决方案是直接使用 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 后端数据处理错误有关，但此方法有效地绕过了这些问题。
以上就是Tauri应用中Vue组件如何正确渲染二进制图像？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
417
