指定したフォルダ配下の画像ファイルを表示するときに注意すること

Electronでアプリケーション配下以外のフォルダにある画像を表示する場合、ちょっと注意が必要だと思ったのでメモとして残しておきます。

普通はロゴなどの画像はアプリケーション配下のフォルダに格納するはずなので問題ないと思いますが、今回は指定したフォルダにある画像ファイルの一覧をイメージで表示したいといったことがあったので、そういった時の話になります。

Electronで画像ファイルを表示する場合、アプリケーション配下に対象の画像ファイルがあるなら、'<img>タグのsrcにWebと同じようなパスを記述することで表示が可能です。

<img src="images/yushin.jpg">

これがアプリケーション配下以外の画像ファイルを表示する場合は以下の通りになります。

<img src="C:\sample\yushin.jpg">

Electronアプリとして実行していれば、上記のパスはどちらも表示されますが、Electron-Vueのテンプレートを利用している場合、開発用の「npm run dev」で起動すると、あくまでWebサイトとして実行しているので、以下のようなエラーががコンソールに出力されて、画像ファイルは表示されません。

Not allowed to load local resource: file:///C:/sample/yushin.jpg

Webサイトなので指定されたフォルダ以外のアクセスが禁止されているため、発生するエラーになります。上記のエラーは、Electronアプリとしてビルドしたものであれば発生せず、問題なく表示されます。

Webサイトの開発では当然なので意識すらしていませんでしたが、ローカルで動作するElectronのデスクトップアプリだと勝手が違うので、ちょっとだけ注意が必要です。