Electronでローカル画像が表示されないときの対処法

Electronのアプリで、ブラウザプレビューを実装していたのですが、ローカル画像が表示されなくてこまりました。

dataUrlを使ってimgのsrc内にdataUrlを入れて表示させていたのですが、複数の画像やサイズの大きい画像を表示させると重くて使い物になりません。

自分なりの対処法を見つけましたので紹介します。

webSecurityを開発環境だけoff

ローカル画像の件で調べると、真っ先に出てくる解決法はwebSecurityをfalseにすることです。

しかし、ElectronでwebSecurityをfalseにするのは推奨されておらず、異なるドメインからのスクリプトが実行できるようになり危険です。

いろいろ試してみたところ、webSecurityがtrue(デフォルトのまま)でも、buildしたアプリではローカル画像が普通に表示されていました。

srcを「file:」を使って読み込めば表示されます。

//winodwsの場合
<img src="file:C:/path/to/img.jpg">

// Macの場合
<img src="file:/path/to/img.jpg">

ローカル画像を表示させる時、「file:///」と、スラッシュを3つ使うという情報がほとんどですが、スラッシュなしの「file:」でも表示できました。

Mozillaだと「file:///」で、Chromeだと「file:///」「file:」どちらでもOKなようです。

Windows、Mac共に、「file:///」「file:」で表示されるのを確認しました。

buildしたアプリでは画像が表示されていても、開発環境で表示されないと困るので、electron-is-devを使って開発時はwebSecurityをfalseに、本番環境ではtrueにするようにしました。

import isDev from "electron-is-dev";

const mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity:!isDev // 開発環境だけfalseに
    },
  });

isDevは、開発環境だとtrueが返ってくるので、!をつけてfalseにしています。

おわりに

ローカル画像は表示できないものかと思ってdataUrlを使って実装しましたが、この方法で画像を直接読み込めてよかったです。

めっちゃハマって時間を無駄にした…。