Tauri+Vue3图像解析：玩转二进制文件读取！

本文提供Tauri+Vue3应用中解析本地二进制图像文件的终极解决方案。在使用Tauri构建的Markdown解析器中，由于浏览器安全策略限制，本地图片在构建后无法显示，即使修改CSP策略也无效。文章分析了使用Tauri的fs API和Rust后端读取二进制文件再传递给前端的两种方案的失败原因，最终通过Blob对象和URL.createObjectURL方法成功生成图片URL，完美解决了图片显示问题，为开发者提供高效可靠的图像解析方案。

Tauri、Vue3应用中解析本地二进制图像文件的解决方案

本文探讨在使用Tauri、Vue3和markdown-it构建的Markdown解析器中，由于安全策略限制导致本地图片无法显示的问题，并提供最终解决方案。

问题：该工具使用v-html渲染Markdown文件中的图片（相对路径）。开发模式下图片正常显示，但构建后，即使路径转换为绝对路径（例如：https://tauri.localhost/img/xxx.png），浏览器安全策略仍阻止前端访问本地图片。

尝试：修改tauri.conf.json中的CSP策略（例如将img-src设置为*）无效。尝试了两种方案：1. 使用Tauri的fs API读取本地文件；2. 在Rust后端读取二进制文件，将数据传递给前端，使用Blob对象解析。两种方案均导致图片显示损坏或无法加载，怀疑问题在于Vue.js的图片解析或数据格式。

初始前端代码尝试将二进制数据转换为字符串，再使用window.btoa编码为base64，最后设置img元素的src属性。

最终解决方案：使用Blob对象和URL.createObjectURL方法生成URL。代码如下：

let img_path = "E:/myProjects2/tauri_vue/mdren/img/a-1-01.png";
const contents = await readBinaryFile(img_path); // 假设readBinaryFile函数已定义
let blob = new Blob([contents], { type: "image/png" });

async function reloadImg() {
  let img_element = document.querySelectorAll("#img-to-remove");
  img_element.forEach(async (element) => {
    element.src = URL.createObjectURL(blob);
  });
}

原因分析：之前的方案失败可能由于CSP配置错误或Rust后端数据传递问题。使用Blob对象和URL.createObjectURL直接创建图片URL，绕过了安全策略限制，成功解决了图片显示问题。

本篇关于《Tauri+Vue3图像解析：玩转二进制文件读取！》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！