我要评论
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应用中：如何正确解析本地二进制图像文件？的详细内容，更多请关注代码网其它相关文章！
发表评论