Tauri+Vue3应用中：如何正确解析本地二进制图像文件？

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，绕过了安全策略限制，成功解决了图片显示问题。