🐂

ビルド後のtauriアプリでローカルの画像を参照する

2024/11/05に公開

 Tauriでローカル画像ファイルを表示しようとした...アプリの背景画像をユーザーが直接好みの背景に変えれるようにローカルから画像ファイルを読み込む処理を実装してみようと思いました。

しかしビルドする前のアプリだと表示されるのにビルド後のアプリは上手く表示されず困っていました。

この記事では、TauriのconvertFileSrc関数とallowlist設定を使用して、ローカル画像を問題なく表示する方法を解説します。

 画像表示の課題と解決策当初、画像の表示にはBase64に変換して表示をしていましたが、久しぶりにTauriをビルドするとアプリではこれらの方法だと表示できないことを知りました。(久しぶりは良くないよね)
解決する方法が見つからず半日途方に暮れている時にXで困ってる趣旨を呟くとFF外のさすらいのエンジニアが「TauriにはconvertFileSrcという便利な関数が用意されている」とご教示をいただきました。
https://tauri.app/reference/javascript/api/namespacecore/#convertfilesrc
この関数を使えば、ローカルファイルパスをTauriのWebビューで直接アクセス可能なURLに変換できるらしい。
また、これと合わせてtauri.conf.jsonにallowlist設定を追加することで、セキュリティを確保しながらローカルファイルの読み込みが可能になります。

 convertFileSrc関数の概要convertFileSrc関数は、デバイス内のファイルパスをWebビューで読み込み可能なURLに変換するためのものです。

例えば、$HOME/<任意のパス>/images/background.jpgのようなファイルパスをfile://ではなく、Tauriが認識できるプロトコルでアクセスできるようにします。

次に、設定方法を詳しく説明します。

 tauri.conf.jsonの設定convertFileSrcを使用してローカル画像を読み込むためには、tauri.conf.jsonの設定にallowlistオプションで読み込み範囲を明示する必要があります。
ここでは、画像ディレクトリ$HOME/<任意のパス>/imagesを設定します。
{
  "tauri": {
    "security": {
      "csp": "default-src 'self'; img-src 'self' asset: http://asset.localhost;"
    },
    "allowlist": {
      "protocol": {
        "asset": true,
        "assetScope": [
          "$HOME/<任意のパス>/images",
          "$HOME/<任意のパス>/images/*"
        ]
      }
    }
  }
}
allowlist.protocol.assetをtrueにすることで、Tauriが画像ファイルを認識できるようになります。
allowlist.protocol.assetScopeはアプリがアクセスを許可するローカルパスの範囲を指定します。ここでは、$HOME/<任意のパス>/images内のファイルを指定しています。

 Reactのコード次に、Reactでこの設定を使って画像を表示する方法を紹介します。@tauri-apps/api/pathからhomeDirを取得し、convertFileSrcを使って画像パスを変換します。
import { useEffect, useState } from "react";
import { convertFileSrc } from "@tauri-apps/api/tauri";
import { homeDir } from "@tauri-apps/api/path";

function App() {
  const [imageUrl, setImageUrl] = useState("");

  useEffect(() => {
    async function loadImage() {
      try {
        const home = await homeDir();
        const filePath = `${home}<任意のパス>/images/background.jpg`;
        const assetUrl = convertFileSrc(filePath);
        setImageUrl(assetUrl);
      } catch (error) {
        console.error("Error loading image:", error);
      }
    }
    loadImage();
  }, []);

  return (
    <div>
      {imageUrl && <img src={imageUrl} alt="Bg Image" />}
    </div>
  );
}

export default App;

convertFileSrcで取得したassetUrlは、Reactコンポーネント内の<img>タグに直接使用できます。
これで、file://プロトコルを使用することなく、TauriアプリのWebビューで画像を表示できます。

 設定変更後の再ビルドnpm run tauri build
たぶんいけるはず。

 なんか出たエラー系Tauriで画像を読み込む際に403エラーが出る場合、tauri.conf.jsonのallowlistとcsp設定が適切であるか確認したほうがいいです。
そもそもエディター使ってたらwarning出るかもしれんけど、古いドキュメント見てassetProtocolを使おうとしたら怒られた。古いバージョンのTauriや新しいバージョンで、構文が変更されている場合があるから、最新の公式ドキュメントを確認した方がいいです。

 結論convertFileSrcとallowlist設定を使用することで、ローカルファイルの画像をTauriアプリ上で表示できるようになりました。

ビルド後のtauriアプリでローカルの画像を参照する

Tauriでローカル画像ファイルを表示しようとした...

画像表示の課題と解決策

`convertFileSrc`関数の概要

`tauri.conf.json`の設定

Reactのコード

設定変更後の再ビルド

なんか出たエラー系

結論

Discussion