Electronデスクトップアプリ内に表示される画像は、レンダラープロセスに関連付いたHTML&CSSやJavaScriptから参照できるフォルダに配置するのが一般的である。しかしPC内のローカルフォルダを参照しなければならない場合どうすればよいだろうか。

このエントリーは、上記要件に遭遇した際の対応を記したものだ。

フォルダ構成

• mainフォルダにメインプロセスの起点となるindex.jsを配置
• rendererフォルダにレンダラープロセスの起点となるindex.htmlを配置

プロジェクトフォルダ内の画像を表示

• rendererフォルダの「aizulab_logo.png」を読み込む

PC内ローカルフォルダの画像を表示

• Documentsフォルダの「aizulab_logo.png」を読み込む

例外

webpack-dev-serverの簡易Webサーバーを必要とするケースも考えられる。たとえばSSR開発をサポートするNext.jsやNuxt.jsは、そもそも起点とするHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちで、ページが生成されるためである。したがって、Electronの開発時には簡易Webサーバーを参照するようにして、ビルド時にはエクスポートした静的ファイルを参照させる。

開発時に簡易Webサーバーを設ける必要がある場合、PC内ローカルフォルダ参照がルートパスであるため簡易Webサーバーのルートを指し示してしまう。それでは、該当する画像を表示させることができない。

これに対処するには、

<img src="file:///Users/【ユーザー名】/Documents/aizulab_logo.png" />

のように「file://」プロトコルを使ってほしい。これはWindowsの場合でも同様である。ところが、Windowsだと背景画像にすることができなかった。

背景画像にしたかった理由は、縦横比は保持して拡大縮小させたかった。つまりbackground-size:cover;を適用するつもりだったのだ。

これをimgタグで実現させなければならない。この対処には、

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

で、縦横比を保持して拡大縮小させることができる。

もしこれらの事象に見舞われたら試してほしい。そしてこのエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。