Tauri+Vue3應用中：如何正確解析本地二進制圖像文件？

Tauri、vue3應用中解析本地二進制圖像文件的解決方案

本文探討在使用Tauri、vue3和markdown-it構建的Markdown解析器中，由于安全策略限制導致本地圖片無法顯示的問題，并提供最終解決方案。

問題：該工具使用v-html渲染Markdown文件中的圖片（相對路徑）。開發模式下圖片正常顯示，但構建后，即使路徑轉換為絕對路徑（例如：https://tauri.localhost/img/xxx.png），瀏覽器安全策略仍阻止前端訪問本地圖片。

嘗試：修改tauri.conf.JSon中的CSP策略（例如將img-src設置為*）無效。嘗試了兩種方案：1. 使用Tauri的fs API讀取本地文件；2. 在rust后端讀取二進制文件，將數據傳遞給前端，使用Blob對象解析。兩種方案均導致圖片顯示損壞或無法加載，懷疑問題在于Vue.js的圖片解析或數據格式。

立即學習“前端免費學習筆記（深入）”；

初始前端代碼嘗試將二進制數據轉換為字符串，再使用window.btoa編碼為base64，最后設置img元素的src屬性。

最終解決方案：使用Blob對象和URL.createObjectURL方法生成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" });  async function reloadImg() {   let img_element = document.querySelectorAll("#img-to-remove");   img_element.forEach(async (element) => {     element.src = URL.createObjectURL(blob);   }); }

原因分析：之前的方案失敗可能由于CSP配置錯誤或Rust后端數據傳遞問題。使用Blob對象和URL.createObjectURL直接創建圖片URL，繞過了安全策略限制，成功解決了圖片顯示問題。