auri、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属性。