Tauri应用中Vue3图片打包后无法显示：如何正确渲染Markdown中的图片？

tauri 应用中 vue3 图片打包后无法显示：markdown 图片渲染问题的终极解决方案

在使用 Tauri + Vue3 + markdown-it 构建的 Markdown 解析器中，开发模式下图片显示正常，但打包后却无法显示，这是由于安全策略限制前端无法访问相对路径图片导致的。本文将详细分析问题并提供最终解决方案。

问题：

应用使用 v-html 渲染 Markdown 内容，图片路径为相对路径（例如 ../img/xxx.png）。打包后，前端无法访问这些相对路径，正确的路径应该是 https://tauri.localhost/img/xxx.png。修改 tauri.conf.json 中的 tauri.security.csp 配置（例如设置为 "csp": "default-src 'self'; img-src '\*' asset: https://asset.localhost" 或 "csp": "asset:"）也未能解决问题。

尝试过的解决方案（均失败）：

立即学习“前端免费学习笔记（深入）”；

1. 使用 Tauri 的 fs 模块读取本地图片: 在 Rust 后端或前端直接读取图片文件，转换为 Blob 对象再渲染。图片仍然无法显示。
2. 从 Rust 后端传递二进制数据到前端: 将图片的二进制数据从 Rust 后端传递到前端，使用 Blob 对象解析，依然无效。
3. Base64 编码: 将二进制数据转换为 Base64 字符串，作为 data:image/png;base64,... 的 src 属性赋值给 img 标签。 失败。

最终解决方案：

问题最终通过使用 Blob 对象和 URL.createObjectURL 方法解决。不再进行 Base64 编码，而是直接使用 Blob 对象创建 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" });
element.src = URL.createObjectURL(blob);

通过此方法，打包后的应用中图片能够正常显示。之前的失败尝试可能是由于 CSP 配置错误或 Rust 后端传递的数据存在问题。 确保你的 readBinaryFile 函数正确读取并返回图片的二进制数据。 也请检查你的 CSP 配置是否允许访问 blob: URL。 如果问题仍然存在，请检查你的 Rust 后端代码和网络请求。

以上就是Tauri应用中Vue3图片打包后无法显示：如何正确渲染Markdown中的图片？的详细内容，更多请关注php中文网其它相关文章！