Tauri、Vue3及Markdown解析工具中的图片渲染问题及解决方案
在使用Tauri、Vue3和markdown-it构建的Markdown解析器中，开发模式下图片显示正常，但打包后却无法显示。 即使路径已修正为https://tauri.localhost/img/xxx.png，由于安全策略限制，前端仍然无法访问本地图片资源。
尝试修改tauri.conf.json中的CSP配置和tauri.allowlist.fs，允许访问本地文件系统，但问题依然存在。
最初尝试通过Tauri的fs API读取本地二进制图像文件，并使用window.btoa将其转换为Base64字符串，再设置img标签的src属性。然而，无论是后端读取文件传递到前端，还是前端直接使用fs读取，图片都无法显示。
立即学习“前端免费学习笔记（深入）”；
为排查问题，创建了一个简化Demo，直接在Vue组件中读取本地图片。使用readBinaryFile读取图片数据，并尝试使用window.btoa转换为Base64，但依然无效。
最终解决方案：放弃window.btoa，直接使用Blob对象。将读取到的二进制数据（Uint8Array）使用new Blob([contents], { type: "image/png" })创建Blob对象，然后使用URL.createObjectURL(blob)生成URL，并赋值给img标签的src属性。 此方法成功解决了图片显示问题。之前Blob方法失败可能源于CSP配置错误或Rust后端数据传递问题。
关键代码片段：
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); });}
以上就是Tauri+Vue3应用中，打包后本地图片无法显示，如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503238.html
微信扫一扫 
支付宝扫一扫 
