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应用中，打包后本地图片无法显示，如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
775
