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 后端代碼和網絡請求。