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

以上就是tauri+vue3应用中，打包后本地图片无法显示，如何解决？的详细内容，更多请关注代码网其它相关文章！