我要评论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:"）也未能解决问题。
尝试过的解决方案（均失败）：
- 使用 tauri 的 fs 模块读取本地图片: 在 rust 后端或前端直接读取图片文件，转换为 blob 对象再渲染。图片仍然无法显示。
- 从 rust 后端传递二进制数据到前端: 将图片的二进制数据从 rust 后端传递到前端，使用 blob 对象解析，依然无效。
- 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中的图片？的详细内容，更多请关注代码网其它相关文章！
发表评论