Tauri Vue3アプリケーション：ローカルバイナリ画像ファイルを正しく解析する方法は？

TauriおよびVue3アプリケーションでローカルバイナリ画像ファイルを解析するソリューション

この記事では、Tauri、Vue3、およびMarkdown-ITで構築されたMarkdown Parserのセキュリティポリシーの制限により、ローカル画像を表示できないという問題について説明し、最終的なソリューションを提供します。

問題：このツールはv-htmlを使用して、マークダウンファイルで画像（相対パス）をレンダリングします。画像は開発モードで正常に表示されますが、構築後、ブラウザのセキュリティポリシーは、パスが絶対パスに変換されている場合でも、フロントエンドがローカル画像にアクセスするのを防ぎます（たとえば、 https://tauri.localhost/img/xxx.png ）。

試してください： tauri.conf.jsonでCSPポリシーを変更する（たとえば、 img-src設定*に）無効です。 2つのソリューションを試しました。1。タウリのfs APIを使用してローカルファイルを読み取ります。 2。錆バックエンドでバイナリファイルを読み取り、データをフロントエンドに渡し、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関数が定義されていると仮定しますblob = new blob（[contents]、{type： "image/png"}）;

async関数reloadimg（）{
  let img_element = document.queryselectorall（ "＃img-to-remove"）;
  img_element.foreach（async（element）=> {
    element.src = url.createobjecturl（blob）;
  }）;
}

原因分析：以前のソリューションが失敗したのは、CSP構成エラーまたは錆のバックエンドデータ配信の問題が原因である可能性があります。 BlobオブジェクトとURL.createObjectURLを使用して画像URLを直接作成し、セキュリティポリシーの制限をバイパスし、画像表示の問題を正常に解決します。

以上がTauri Vue3アプリケーション：ローカルバイナリ画像ファイルを正しく解析する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。