Zenn
Open3

tauriでWebViewから直接ローカルファイル読み込む

Tauri
bpk_tbpk_t

こういうことがしたかった

function app() {
  return (<img src="file://aaaa/bbbb/cccc.png" />)
}

デフォルトでは当然のようにできない
not allowed to load local resource って怒られる

bpk_tbpk_t

具体例

tsx

import { convertFileSrc } from '@tauri-apps/api/tauri';

function app() {
  return (<img src={convertFileSrc("aaaa/bbbb/cccc.png") } />)
}

tauri.conf.json

  • tauri/allowlist/protocol 追加
    • assetScope にはパス指定（今回は全アクセスしたかったので ** ）
{
  "tauri": {
    "allowlist": {
      "protocol": {
        "asset": true,
        "assetScope": [ "**" ]
      }
    },
  • tauri/security/csp に以下を追加
{
  "tauri": {
    "security": {
      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
    },