Tauri中Vue3图片打包后显示问题解决：Markdown图片渲染技巧

Tauri应用中使用Vue3和markdown-it渲染Markdown图片时，打包后图片无法显示？本文针对Tauri+Vue3项目中Markdown图片渲染问题，深入分析了由于安全策略限制导致相对路径图片无法访问的根本原因。文章排除了修改`tauri.conf.json`中的CSP配置、使用Tauri的fs模块读取本地图片、从Rust后端传递二进制数据到前端以及Base64编码等多种方案后，最终通过Blob对象和`URL.createObjectURL`方法成功解决了图片显示问题，并提供了详细的代码示例和注意事项，助你快速解决打包后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图片渲染技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！