Tauri+Vue3应用中，打包后本地图片无法显示，如何解决？

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);  });}

登录后复制