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，繞過了安全策略限制，成功解決了圖片顯示問題。

以上是Tauri Vue3應用中：如何正確解析本地二進製圖像文件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！