ElectronでローカルPC内の画像ファイルをimgタグのsrcにローカルファイルパス設定して表示する

2734 ワード
electron-vue Electron Electron テキストリンク

ElectronでローカルPC内のアプリケーション配下ではない別のフォルダにある画像を画面表示したくて、以下のような感じでimgタグのsrcにローカルファイルパスを設定したところエラーになり表示されませんでした。

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

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

どうやら、開発用の「npm run dev」で起動するとWebサイトとして実行（index.htmlをhttpでロード）しているため、Webセキュリティの機能でエラーになるそうです。Electronアプリとしてビルドしたものであればエラー発生しないらしい。
指定したフォルダ配下の画像ファイルを表示するときに注意すること

とはいえ、開発中の「npm run dev」での起動状態でもローカル画像ファイルを表示したい。

試しに、以下のようにindex.jsあたりでBrowserWindowをnewしているところでwebSecurityのパラメータをfalseにしてみたとろ、エラーが表示されずにローカル画像ファイルが表示されるようになりました。（この設定に変更して「npm run dev」しなおした初回はなぜかうまくいかなかったのに、何度かやり直しているうちに正常に動作するようになりました。。。なぜ？？）

  mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: false
    }
  })

webSecuriy設定をOFFにすると動作するようになるということなんですが、開発中の「npm run dev」での起動状態のときだけOFFにしたいので以下のような設定にしました。

  mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: process.env.NODE_ENV !== 'development'
    }
  })

参考
https://github.com/SimulatedGREG/electron-vue/issues/539
https://electronjs.org/docs/api/browser-window

Python—実操項目:SMTPは複数人にメールを送る(添付ファイルと添付ファイルを持たない)
pythonでのスレッドの使用