Tauri2 + Vue3で実行フォルダ内の画像を表示するには?
- 作成日: 2025-08-16
- 更新日: 2025-08-17
- カテゴリ: Tauri2
- タグ: Tauri2, Vue3, GUI
exeファイルのあるフォルダ内に配置している画像を表示したい場合のTauri2の設定を解説します。
ここでは前提としてexeファイルのあるフォルダ以下にresourcesフォルダを配置し、その中にneko.pngという画像を置くことにします。
Tauri2はセキュリティ上、ファイルへの読み込み/書き込みなどは個別に許可を与える設定を書く必要があります。
まずtauri.conf.jsonを編集してsecurityを設定します。
"app": {
"security": {
"csp": {
"img-src": "'self' asset: http://asset.localhost blob: data:"
},
"assetProtocol": {
"enable": true,
"scope": ["$RESOURCE/resources/neko.png"]
}
}
},
cspはimg-srcを上記のように設定します。scopeはresource/neko.pngを指定しています。$RESOURCEというのは変数みたいなもので、これを頭につけるとexeファイルのあるフォルダのパスになります。
scopeはアクセス範囲を指定できます。つまりここで設定したアクセス範囲でtauriはファイルを参照します。
**にするとフルアクセスになりますがセキュリティ的にはおすすめできない設定です。
画像ファイルをexeファイルと同じ階層のフォルダにコピーしたいので、tauri.conf.jsonのbundleを以下のように設定します。
"bundle": {
"active": true,
"targets": "all",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
"resources": {
"C:\\path\\to\\resources\\*": "resources\\"
}
resourcesにコピー元のパスとコピー先のパスを指定します。上記の設定ではC:\\path\\to\\resources\\以下のすべてのファイルをresources\\以下(exeファイルのあるフォルダ以下のresourcesというフォルダ)にコピーします。
Vue3は以下のように記述します。
<script setup>
import { ref, onMounted } from "vue";
import { convertFileSrc } from '@tauri-apps/api/core';
import { join } from '@tauri-apps/api/path';
import { resourceDir } from "@tauri-apps/api/path";
let imgSrc = ref(null)
onMounted(async () => {
// exeファイルのあるフォルダのパスを取得
let resDir = await resourceDir()
// resDirをベースにパスを合成
let path = await join(resDir, "resources/neko.png")
// ファイルパスをtauriで参照できるパスに変換する(http://asset.localhost)
imgSrc.value = convertFileSrc(path)
console.log(imgSrc.value)
})
</script>
<template>
<main>
<img :src="imgSrc">
{{ imgSrc }}
</main>
</template>