Tauri应用中Vue组件如何正确渲染二进制图像？

tauri 应用中 vue 组件渲染二进制图像的有效方法

本文介绍在使用 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组件如何正确渲染二进制图像？的详细内容，更多请关注代码网其它相关文章！