Electronで外部ファイルを利用したいが、パス解決でエラーが発生する。

Question

前提・実現したいこと

大量の外部ファイル(ユーザーがファイルを配置して利用することを想定)があるアプリを作成する時
staticフォルダの中に設置したままbuildするとパッケージ内に含まれてしまう、またビルド時にエラーが発生するので
この大量のファイルをアプリの外部に出して利用できるようにしたい。

発生している問題・エラーメッセージ

Electron(正しくはVue-Electron)とVue2Leafletを使った地図アプリを作成しています。
このアプリにはテスト段階で8万件くらいの画像を使っており、（諸事情によりラスターで地図データを持つ必要があるので)
本番環境では画像データを適切なフォルダに配置してもらい、それをインポートする....という想定です。

開発段階で、Electronのパス解決の問題から、staticフォルダに画像を設置していましたが
build時にError EMFILE too many files open.が出力されてしまい、
この原因がfsにあって、graceful-fsを導入すると解決する、という記事があったのですが、
開発パッケージの中でfsを検索してもみつからず、
また、バイナリの中に含むのは適切ではないファイルですので、これは一旦解決しないままにしておくことにしました。

そこで、
path.join(app.getPath('userData'), imageName)で、%AppData%, Application Supportsに配置し
これを取得するよう考えたのですが、
該当のソース部分がURLを使ったパス解決を行なっていることもあり、
404 (Not Found) Failed to load resource: the server responded with a status of 404 (Not Found)
と、今度はimageにURL的にアクセスできない、というエラーが発生しました。

Electron自体の挙動に詳しくなく、相対パスでElectronが参照する時まずどこを起点にしているのかがわからないため
アプリ化したときに、どこに外部ファイルを設置するのが適切で、どういった参照を行うべきか
ご存知の方がおられたら教えてください。
最終手段としてExpressでサーバーを開発して、もう一つ常駐ソフトを使うというのも考えましたが
開発と操作が煩雑になってしまうのでやりたくはありません。。
(また、どのみちExpressでパス解決問題にぶち当たってしまう気がしています）

Macで開発しており、Win版のパッケージをbuildして、最終的にWinで使う予定です。
OS間のパス解決の注意点がありましたら、併せて教えてください。

どうぞよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

vue-electron 1.0.6

Answer 1

私はWindowsのみを対象に開発していますのでMacはわかりかねますが、
以下のようにしてデータ用のディレクトリを作成しています。
Windowsの場合初回起動時に自動的にアプリ名でディレクトリが作られます。
そこにデータ用ディレクトリを作ってユーザーデータをねじ込むようにしています。
（要するに、相対パスではなく絶対パス）

const fs = require('fs/promises');
const envs: { [key: string]: any } = process.env;// 環境変数を取得
const appDataBasePath = envs.APPDATA + '\\\\' + app.getName();
const appDataPath = appDataBasePath + '\\\\save_data';
(async () => {
	try {
		const stat = await fs.stat(appDataPath, {recursive: true});
		console.log(stat);
	} catch (err: any) {
		if (err.code === 'ENOENT') {
			const stat = await fs.mkdir(appDataPath);
			console.log(err, stat);
		}
	}
})();

画像の読み取りに関しては試していませんが file:// プロトコルで取れるような気がします。
テスト環境では以下で普通に表示されました。
javascriptによる動的生成でも問題ありませんでした。（createElement と appendChild）
パス情報は preload.js で
contextBridge.exposeInMainWorld で
ipcRenderer を使って渡せば大丈夫かと。

<img src="file:///C:/パス/ファイル.jpg">

あとは8万点ほど画像データがあるなら、
diskspace
などで、ドライブの空き容量を確認させた方が良いと思います。